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.dt d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitl ed Document</title>
<script type="text/javascript">
var active = 1;
var d = document;
function swapdiv(n) {
if (n != active) {
//tabs
d.getElementByi d("l"+n).classN ame = "active"
d.getElementByi d("l"+active).c lassName = "inactive";
//divs
d.getElementByi d("d"+n).style. display = "block";
d.getElementByi d("d"+active).s tyle.display = "none";
//set active
active = n;
//even divs
evendivs();
}
}
function evendivs() {
var l = d.getElementByi d("content");
var r = d.getElementByi d("right");
//reset div heights
l.style.height = "";
r.style.height = "";
//check and resize divs as necessary
if (parseInt(l.off setHeight) > parseInt(r.offs etHeight)) {
r.style.height = (parseInt(l.off setHeight)+23)+ "px";
} else if (parseInt(l.off setHeight) < parseInt(r.offs etHeight)); {
l.style.height = (parseInt(r.off setHeight)-27)+"px";
}
</script>
</head>
<body>
<div id="left">
<ul class="nav">
<li class="active" id="l1"><a onclick="swapdi v(1)">How this works</a></li>
<li class="inactive " id="l2"><a onclick="swapdi v(2)">About Us</a></li>
<li class="inactive " id="l3"><a onclick="swapdi v(3)">Testimoni als</a></li>
<li class="inactive " id="l4"><a onclick="swapdi v(4)">Contact Us</a></li>
</ul>
<div class="clear">& nbsp;</div>
<div id="content">
<div id="d1" class="content" ><h3>How it works</h3></div>
<div id="d2" class="content" style="display: none;"><h3>Abou t US</h3></div>
<div id="d3" class="content" style="display: none;"><h3>Test imonials</h3></div>
<div id="d4" class="content" style="display: none;"><p>Conta ct Us Info</p></div>
</div>
</div>
</body>
</html>
Help me if you can find a solution regarding this.
