Dúvida sobre display block e display none
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:
Agradeço desde já pela ajuda ;)
Essa dúvida foi gerada a partir de um comentário no Curso de JavaScript Completo
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
Curtidas 0
Respostas
Rodrigo Pinto
18/04/2018
<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";
}
}
<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";
}
}
GOSTEI 0