<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<style type="text/css">
#tabContainer {width:600px;height:300px;position:relative;border:2px solid gray;}
.pane h2 {float:left;border:2px solid blue;margin:0;padding:0;font-size:20px;cursor:pointer;}
.contents {position:absolute;top:25px;left:0;display:none;}
#tabContainer.about #about .contents,
#tabContainer.contact #contact .contents,
#tabContainer.help #help .contents,
#tabContainer.practice #practice .contents
{display:block;}
#tabContainer.about #about h2,
#tabContainer.contact #contact h2,
#tabContainer.help #help h2,
#tabContainer.practice #practice h2
{border:1px solid red;border-width:2px 2px 0;}
</style>
<script type="text/javascript">
function setactive()
{
var el = this;
var className = el.parentNode.id;
el.parentNode.parentNode.className = className;
}
window.onload = function()
{
var titles = document.getElementsByTagName('h2');
for(var i=0;i<titles.length;i++)
{
titles[i].onclick = setactive;
}
}
</script>
</head>
<body>
<div id="tabContainer">
<div id="about" class="pane">
<h2>Pre Season</h2>
<div class="contents">This is pane 1</div>
</div>
<div id="contact" class="pane">
<h2>Regular Season</h2>
<div class="contents">This is pane 2</div>
</div>
<div id="help" class="pane">
<h2>Post Season</h2>
<div class="contents">This is pane 3</div>
</div>
<div id="practice" class="pane">
<h2>Practice</h2>
<div class="contents">This is pane 4</div>
</div>
</div>
</body>
</html>
tabs text
Leave a Reply
You must be logged in to post a comment.