FabioM Posted July 19, 2014 at 07:34 PM Report Share #562882 Posted July 19, 2014 at 07:34 PM 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 at 09:37 AM Report Share #563213 Posted July 24, 2014 at 09:37 AM 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 at 08:16 PM Report Share #563383 Posted July 25, 2014 at 08:16 PM (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 at 08:21 PM by Icepick.pt Link to comment Share on other sites More sharing options...
panickz Posted August 18, 2014 at 11:59 AM Report Share #564977 Posted August 18, 2014 at 11:59 AM (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 at 12:01 PM 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