Fórum Dúvida sobre display block e display none #592556

18/04/2018

Olá pessoal, tudo bem!?
Estava tentando fazer algo, mas não sei se para isso preciso de if else.
É o seguinte: uma aba de navegação com alguns items que ao serem clicados exibem um conteúdo. Apenas o primeiro conteúdo começa com display block e os demais com display none.
A dúvida é: quando eu clicar em algum item e exibir seu conteúdo quero que os demais conteúdos recebam o display none.

Como faço isso da forma mais inteligente, sem ser da maneira abaixo? Queria que ele identificasse os demais itens (que não forem clicados) e os ocultasse:

document.getElementById("conteudoUm").style.display="block"
document.getElementById("conteudoDois").style.display="none"
document.getElementById("conteudoTres").style.display="none"
 
document.getElementById("conteudoUm").style.display="none"
document.getElementById("conteudoDois").style.display="block"
document.getElementById("conteudoTres").style.display="none"
 
document.getElementById("conteudoUm").style.display="none"
document.getElementById("conteudoDois").style.display="none"
document.getElementById("conteudoTres").style.display="block"

Agradeço desde já pela ajuda ;)

Essa dúvida foi gerada a partir de um comentário no Curso de JavaScript Completo

Afrânio

Curtir tópico

+ 0

Responder

Posts

18/04/2018

Rodrigo Pinto

<div id="Titulo1" onClick="revela(this.id)">REvela div 1</div>
<div id="Conteudo1" style="display:none;" onClick="revela(this.id)">Conteudo 1</div>

<div id="Titulo2" onClick="revela(this.id)">REvela div 2</div>
<div id="Conteudo2" style="display:none;" onClick="revela(this.id)">Conteudo 2</div>

<div id="Titulo3" onClick="revela(this.id)">REvela div 3</div>
<div id="Conteudo3" style="display:none;" onClick="revela(this.id)">Conteudo 3</div>

<script language="javascript"">
var totalDivsComIdEspecifico = $("div[id *= Titulo]").length; //conta a quantidade de divs começando com Titulo
function revela(x){
var divId = x.replace("Titulo","");
if(document.getElementById('Conteudo'+divId).style.display=="none") {
for(y=1;y<=totalDivsComIdEspecifico;y++){
if(y == divId){
document.getElementById('Conteudo'+y).style.display = "block";
}else{
document.getElementById('Conteudo'+y).style.display = "none";
}
}
}else {
document.getElementById('Conteudo'+divId).style.display = "none";
}

}

Responder

Gostei + 0