Jump to content

Mostrar/Esconder várias divs


FabioM

Recommended Posts

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";

}
Link to comment
Share on other sites

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

  • Vote 1
Link to comment
Share on other sites

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 by Icepick.pt
Link to comment
Share on other sites

  • 4 weeks later...

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 by panickz
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.