FabioM Posted July 19, 2014 Report Share Posted 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"; } Link to comment Share on other sites More sharing options...
clera Posted July 24, 2014 Report Share Posted 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 1 Report Link to comment Share on other sites More sharing options...
Icepick.pt Posted July 25, 2014 Report Share Posted July 25, 2014 (edited) 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 Link to comment Share on other sites More sharing options...
panickz Posted August 18, 2014 Report Share Posted August 18, 2014 (edited) 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 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now