D�vida sobre display block e display none

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