Mostrar/Esconder várias divs

FabioM · July 19, 2014

Boa tarde

Tenho um menu de navegação que permite ao utilizador clicar no link e fazer aparecer uma div com o conteúdo correspondente e até aqui tudo resolvido, o problema é fazer desaparecer a div que está em display quando se carrega noutro link já que ficam as duas Divs em display em simultâneo.

Aqui está o código HTML:

<script type="text/javascript" src="altera_display.js"></script>

</head>
<body>
 <nav>
 <ul>
	 <li><a href="#" onclick="javascript: altera_display('Div01');">Sobre</a></li>
	 <li><a href="#" onclick="javascript: altera_display('Div02');">Top5</a></li>
	 <li><a href="Historia.html">Historia dos Caminhos de ferro</a></li>
	 <li><a href="#">Pelo Mundo</a>
		 <ul>

			 <li><a href="#">Europa</a> </li>
			 <li><a href="#">Asia</a> </li>
			 <li><a href="#">Oceania</a> </li>
			 <li><a href="#">Africa</a> </li>
			 <li><a href="#">America do Norte</a> </li>
			 <li><a href="#">America do Sul</a> </li>
		 </ul>
	 </li>
	 <li><a href="Factos.html">Factos</a> </li>
 </ul>
 </nav>


 <div id="Div01" style="display: none">Content Div</div>
 <div id="Div02" style="display: none">Content Div</div>
</body>
</html>

E o código Javascript:

function altera_display(id) {
if(document.getElementById(id).style.display=="none") {
 document.getElementById(id).style.display ="block";
}
else
 document.getElementById(id).style.display ="none";

}

clera · July 24, 2014

Boas,

Podes adicionar às div's de conteúdo uma class "conteudo" por exemplo, e cada vez que se carrega num link, antes de fazeres aparecer a div que queres fazes desaparecer todos os ".conteudo".

ou então adicionas uma flag à div visível, assim evitas percorrer todas as div's. Esta flag pode também ser uma class "selected" por exemplo. Antes de clicares vais à div dessa class, remove-la, tornas a div invisível e adicionas a "selected" à nova div.

http://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

Icepick.pt · July 25, 2014

Cria uma terceira função com um array estejam elencadas todas as janelas que podem estar abertas. O que essa função faz é varrer todo o array e fechar todas as janelas, se existirem como objetos. Assim, antes de abrir uma janela nova, certificas-te que estão todas fechadas.

function fechaTodasJanelas(){
   var elemento= new Array();
   elemento[0]='div0';
   elemento[1]='div1';
  elemento[2]='div2';
  var contador=0;
  // varre todo o array de id's e apaga as caixas
  while (typeof elemento[contador]!='undefined'){
    if (document.getElementById(elemento[contador])){
    var esconder=document.getElementById(elemento[contador]);
    esconder.style.display='none';
    }
  var contador=contador+1;
}

Edited July 25, 2014 by Icepick.pt

panickz · August 18, 2014

Tanta confusão..

Podes usar jQuery?

<li class='displayDiv' div-id='1'><a href="#"Sobre</a></li>
<li class='displayDiv' div-id='2'><a href="#" >Top5</a></li>

$( "li.displayDiv" ).click(function() {

var id = $(this).attr('div-id'); //Agarra o ID da div que deve mostar

$('div.toogle').css('display','none');
$('#div'+id).fadeIn(500);
});

<div id="div1" style="display: none" class='toogle'>Content Div1</div>
<div id="div2" style="display: none" class='toogle'>Content Div2</div>

Assim o que ele faz é esconder todas e mostrar a que escolhes-te..

Para acrescentares divs so tens acrescentar o link e a div que o script faz o resto.

Edited August 18, 2014 by panickz

Sign In

Mostrar/Esconder várias divs

Recommended Posts

FabioM

Link to comment

Share on other sites

clera

Link to comment

Share on other sites

Icepick.pt

Link to comment

Share on other sites

panickz

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information