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:
Código :
E o código Javascript:
Código :
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:
Código :
<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>
</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:
Código :
function altera_display(id) {
if(document.getElementById(id).style.display=="none") {
document.getElementById(id).style.display ="block";
}
else
document.getElementById(id).style.display ="none";
}
if(document.getElementById(id).style.display=="none") {
document.getElementById(id).style.display ="block";
}
else
document.getElementById(id).style.display ="none";
}