This is a quick an dirty way of doing it:
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Untitled Page</title>
<style type="text/css" media="screen"><!--
* {
padding: 0;
margin: 0;
}
p {
padding: .5em 0;
}
.tab {
padding: 10px;
border: 1px black solid;
display: block;
}
.tabhidden {
display: none;
}
#container {
visibility: visible;
position: absolute;
width: 600px;
}
#container ul.menu, #container ul.menu li{
display: block;
float: left;
background-color: whitesmoke;
}
#container ul.menu {
margin-bottom: 5px;
border-bottom: 1px black solid
}
#container ul.menu li a {
width: 200px;
float: left;
text-align: center;
text-decoration: none
}
#container ul.menu li a.selected {
background-color: black;
color: white;
}
--></style>
<script type="text/javascript"><!--
var lastTab = 1;
function changeTab(obj, num) {
//change old tab style
document.getElementById("tab"+lastTab).className="";
//hide old tab data
document.getElementById("tabdata"+lastTab).className="tabhidden";
//highlight new tab
obj.className = "selected";
//show Tab data
document.getElementById("tabdata"+num).className="tab";
//set as last tab
lastTab = num;
}
//-->
</script>
</head>
<body bgcolor="#ffffff">
<div id="container">
<ul class="menu">
<li><a href="#" id="tab1" class="selected" onclick="changeTab(this, 1); return false;">Tab 1</a>
<li><a href="#" id="tab2" onclick="changeTab(this, 2); return false;">Tab 2</a>
<li><a href="#" id="tab3" onclick="changeTab(this, 3); return false;">Tab 3</a>
</ul>
<div id="tabdata1" class="tab">
<p>Top Cat! The most effectual Top Cat! Who's intellectual close friends get to call him T.C., providing it's with dignity. Top Cat! The indisputable leader of the gang. He's the boss, he's a pip, he's the championship. He's the most tip top, Top Cat.</p>
<p>One for all and all for one, Muskehounds are always ready. One for all and all for one, helping everybody. One for all and all for one, it's a pretty story. Sharing everything with fun, that's the way to be. One for all and all for one, Muskehounds are always ready. One for all and all for one, helping everybody. One for all and all for one, can sound pretty corny. If you've got a problem chum, think how it could be.</p>
</div>
<div id="tabdata2" class="tabhidden">
<p>There's a voice that keeps on calling me. Down the road, that's where I'll always be. Every stop I make, I make a new friend. Can't stay for long, just turn around and I'm gone again. Maybe tomorrow, I'll want to settle down, Until tomorrow, I'll just keep moving on.</p>
</div>
<div id="tabdata3" class="tabhidden">
<p>80 days around the world, we'll find a pot of gold just sitting where the rainbow's ending. Time - we'll fight against the time, and we'll fly on the white wings of the wind. 80 days around the world, no we won't say a word before the ship is really back. Round, round, all around the world. Round, all around the world. Round, all around the world. Round, all around the world.</p>
<p>Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. He's got style, a groovy style, and a car that just won't stop. When the going gets tough, he's really rough, with a Hong Kong Phooey chop (Hi-Ya!). Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. Hong Kong Phooey, he's fan-riffic!</p>
</div>
</div>
<p></p>
</body>
</html>
