javascript hiding div not working
I have two divs and I want to show only one of the divs based on clicking
a list element. I wrote the following code. Its not working. Its always
showing me Div1 (or whichever one I make visible initially). How do I make
it show me appropriate div? Thank you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script>
function showPane(paneId) {
document.getElementById("Div1").style.display="none";
document.getElementById("Div2").style.display="none";
document.getElementById(paneId).style.display="block";
}
</script>
</head>
<body onload="showPane('Div1');">
<ul id="nav">
<li><a href="" onclick="showPane('Div1')">Div1</a></li>
<li><a href="" onclick="showPane('Div2')">Div2</a></li>
</ul>
<div id="Div1">
<h3>This is Div1</h3>
</div>
<div id="Div2">
<h3>This is Div2</h3>
</div>
</body>
</html>
No comments:
Post a Comment