Forum Moderators: open
I want to make a simple menu.
It contains of 2 parts:
- part 1 - A list links
- part 2 - A list content
I want to start with section 1 visible.
Clicking on a link will hide section 1 and
display the choosen section.
I use a var ActiveElement to remember which
section is visble.
But it doesn't work (snif)
<html><head><title>Simple Menu</title>
<style type="text/css">
.inactivecontent{visibility: hidden; display: none;}
.activecontent{visibility: visible; }
</style>
</head><body>
<a href="#" onclick="makeActivecontent("content1")">content 1</a><br>
<a href="#" onclick="makeActivecontent("content2")">content 2</a><br>
<a href="#" onclick="makeActivecontent("content3")">content 3</a><br><br>
<div id="content1" class="activecontent">Content 1</div>
<div id="content2" class="inactivecontent">Content 2</div>
<div id="content3" class="inactivecontent">Content 3</div>
<script language="JavaScript1.2" type="text/javascript">
var activeElement = document.getElementById("content1");
function makeActivecontent(elementID){
activeElement.className = "inactivecontent";
activeElement = document.getElementById(elementID);
activeElement.className = "activecontent";
}
</script>
</body></html>
<style type="text/css">
.inactivecontent{visibility: hidden; display: none;}
.activecontent{visibility: visible; }
</style>
Without a corresponding display:inline (or display:block) on your .activecontent class.
So to benefit others. Here's the solution:
<script language="JavaScript1.2" type="text/javascript">var remembercontent="content1";
function swapStyleClass( elementID, newClass ){
elem = document.getElementById(elementID);
elem.className = newClass;
}function makeActivecontent(changecontent){
swapStyleClass(remembercontent, "inactivecontent");
swapStyleClass(changecontent, "activecontent");
remembercontent=changecontent;
}</script>
