59
CSS Tabs - contents of a div disappear in IE & onclick is not working
Here is the code:
Swaps the "active" tab and "inactive" tab and swaps out the new content via the display style attribute:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var active = 1;
var d = document;
function swapdiv(n) {
if (n != active) {
//tabs
d.getElementByid("l"+n).className = "active"
d.getElementByid("l"+active).className = "inactive";
//divs
d.getElementByid("d"+n).style.display = "block";
d.getElementByid("d"+active).style.display = "none";
//set active
active = n;
//even divs
evendivs();
}
}
function evendivs() {
var l = d.getElementByid("content");
var r = d.getElementByid("right");
//reset div heights
l.style.height = "";
r.style.height = "";
//check and resize divs as necessary
if (parseInt(l.offsetHeight) > parseInt(r.offsetHeight)) {
r.style.height = (parseInt(l.offsetHeight)+23)+"px";
} else if (parseInt(l.offsetHeight) < parseInt(r.offsetHeight)); {
l.style.height = (parseInt(r.offsetHeight)-27)+"px";
}
</script>
</head>
<body>
<div id="left">
<ul class="nav">
<li class="active" id="l1"><a onclick="swapdiv(1)">How this works</a></li>
<li class="inactive" id="l2"><a onclick="swapdiv(2)">About Us</a></li>
<li class="inactive" id="l3"><a onclick="swapdiv(3)">Testimonials</a></li>
<li class="inactive" id="l4"><a onclick="swapdiv(4)">Contact Us</a></li>
</ul>
<div class="clear"> </div>
<div id="content">
<div id="d1" class="content"><h3>How it works</h3></div>
<div id="d2" class="content" style="display:none;"><h3>About US</h3></div>
<div id="d3" class="content" style="display:none;"><h3>Testimonials</h3></div>
<div id="d4" class="content" style="display:none;"><p>Contact Us Info</p></div>
</div>
</div>
</body>
</html>
Help me if you can find a solution regarding this.
