CSS Tabs - contents of a div disappear in IE & onclick is not working

rahulephp

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.

TheServant

Firstly, please wrap code in [code] tags.

Unfortunately issues in IE, are normally due to IE issues. As in, you should code so that it works in a real browser (like FF) and then make your IE tweaks later.

When you say "onclick is not working", do you mean in all browsers? Check if it's the html or javascript by replacing your onClick function from calling the other javascript function to:

Expand|Select|Wrap|Line Numbers

onClick="(alert('This has fired!'))"

If that fires when you click, then your onClick is working. Then you need to make sure the javascript function swapdiv is working by putting the same little alert into the top of that function. Let us know how you go.

CSS Tabs - contents of a div disappear in IE & onclick is not working

re: CSS Tabs - contents of a div disappear in IE & onclick is not working

Similar HTML / CSS bytes

/bytes/development

/bytes/it

/bytes/about