<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>
<style>
ul {
margin: 0;
padding: 0;
list-style-type: none;
vheight: 24px;
}
ul li {
float: left;
display: inline;
}
ul a {
text-decoration: none;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
display: block;
padding: 5px 0 3px;
margin-left: -1px;
width: 158px;
font-weight: bold;
text-align: center;
line-height: 15px;
color: #11449E;
}
a.on, a:hover {
padding-top: 6px;
padding-bottom: 3px;
width: 159px;
border: 1px solid #ccc;
border-bottom: 0;
background: #DEEBFF;
}
</style>
<script>
function findA(obj) {
TagA = obj.getElementsByTagName("a");
if (TagA.length > 0)
return TagA[0];
}
function findContentDIV(obj) {
TagDiv = obj.childNodes;
var arrDiv = new Array;
for (i = 0; i < TagDiv.length; i++) {
var objDiv = TagDiv[i];
var re = /div/i;
var arr = re.exec(objDiv.tagName);
if (arr != null) {
if (arr.index == 0) {
arrDiv.push(objDiv);
}
}
}
return arrDiv;
}
function chShift(o, divGroupID) {
o.style.cursor = "pointer";
var t = o.parentNode;
var tA = t.getElementsByTagName("a");
var tGroup = document.getElementById(divGroupID);
var tGroupDIV = findContentDIV(tGroup);
for (i = 0; i < tA.length; i++) {
tA[i].className = null;
tGroupDIV[i].style.display = "none";
if (tA[i] == findA(o)) {
tA[i].className = "on";
tGroupDIV[i].style.display = "block";
}
}
}</script>
<table>
<tr>
<td>
<div>
<ul>
<li onmouseover="JavaScript:chShift(this,'divGroup')"><a class="on">Tab标题一</a></li>
<li onmouseover="javascript:chShift(this,'divGroup')"><a>Tab标题二</a></li>
<li onmouseover="javascript:chShift(this,'divGroup')"><a>Tab标题三</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<div id="divGroup">
<div>
<table>
<tr><td>Tab标题一对应的内容</td></tr>
</table>
</div>
<div style="display:none">
Tab标题二对应的内容
</div>
<div style="display:none">
Tab标题三对应的内容
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
效果图: