F.eks.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<title>Simpel tabmenu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;font-family:tahoma,verdana,arial,sans-serif;font-size:small;}
#site{position:relative;width:964px;margin:0 auto;}
.tab{position:absolute;top:0;left:0;width:964px;height:600px;}
.tabLine{height:100px;width:100%;}
.tabLineTd{width:33%;text-align:center;}
.tabSelected{background-color:white;color:black;border:1px solid black;cursor:pointer;}
.tabNotSelected{background-color:#444;color:#ddd;border:1px solid #444;cursor:pointer;}
.tabBody{position:absolute;top:100px;left:0;width:960px;height:600px;border:2px dotted blue;}
</style>
<script language="javascript" type="text/javascript">
function tabMOverOut(elm,over){
if(over){
elm.style.backgroundColor = "red";
}else{
elm.style.backgroundColor = "";
}
}
var oldTab = null;
window.onload = function(){oldTab = document.getElementById("tab1");};
function tabClick(elm){
if(oldTab)
oldTab.style.display = "none";
oldTab = document.getElementById(elm);
oldTab.style.display = "block";
}
</script>
</head>
<body>
<div id="site">
<div id="tab1" class="tab" style="display:block;">
<table class="tabLine">
<tr>
<td class="tabLineTd tabSelected" onmouseover="tabMOverOut(this,true)" onmouseout="tabMOverOut(this,false)" onclick="tabClick('tab1')">
Den første tab</td>
<td class="tabLineTd tabNotSelected" onmouseover="tabMOverOut(this,true)" onmouseout="tabMOverOut(this,false)" onclick="tabClick('tab2')">
Den anden tab</td>
<td class="tabLineTd tabNotSelected" onmouseover="tabMOverOut(this,true)" onmouseout="tabMOverOut(this,false)" onclick="tabClick('tab3')">
Den tredje tab</td>
</tr>
</table>
<div class="tabBody">
Indholdet af den første tab
</div>
</div>
<div id="tab2" class="tab" style="display:none;">
<table class="tabLine">
<tr>
<td class="tabLineTd tabNotSelected" onmouseover="tabMOverOut(this,true)" onmouseout="tabMOverOut(this,false)" onclick="tabClick('tab1')">
Den første tab</td>
<td class="tabLineTd tabSelected" onmouseover="tabMOverOut(this,true)" onmouseout="tabMOverOut(this,false)" onclick="tabClick('tab2')">
Den anden tab</td>
<td class="tabLineTd tabNotSelected" onmouseover="tabMOverOut(this,true)" onmouseout="tabMOverOut(this,false)" onclick="tabClick('tab3')">
Den tredje tab</td>
</tr>
</table>
<div class="tabBody">
Indholdet af den anden tab
</div>
</div>
<div id="tab3" class="tab" style="display:none;">
<table class="tabLine">
<tr>
<td class="tabLineTd tabNotSelected" onmouseover="tabMOverOut(this,true)" onmouseout="tabMOverOut(this,false)" onclick="tabClick('tab1')">
Den første tab</td>
<td class="tabLineTd tabNotSelected" onmouseover="tabMOverOut(this,true)" onmouseout="tabMOverOut(this,false)" onclick="tabClick('tab2')">
Den anden tab</td>
<td class="tabLineTd tabSelected" onmouseover="tabMOverOut(this,true)" onmouseout="tabMOverOut(this,false)" onclick="tabClick('tab3')">
Den tredje tab</td>
</tr>
</table>
<div class="tabBody">
Indholdet af den tredje tab
</div>
</div>
</div>
</body>
</html>
