Menu
Hi there.
I´ve a menu that shows content in a div after the user clicks on the corresponding link but the div actually showing up doesnt dissapear when the user clicks another link.
How do i do to make the displayed div to hide when the user clicks another link?
Here is the HTML code :
[CODE]<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>
And here is the Javascript code:
[CODE]function altera_display(id) {
if(document.getElementById(id).style.display==”none”) {
document.getElementById(id).style.display =”block”;
}
else
document.getElementById(id).style.display =”none”;
}