网页Tab有多种方法，下面的代码使用JavaScript实现，同时将JavaScript代码与Html代码分离，可读性较好。
<!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>tab</title>
<style type="text/css">
ul, li, p { margin:0; padding:0; }
body { font:12px/1.5em arial; }
.tab { border:1px solid #D5D5D5; }
.tab ul {
list-style:none;
padding:4px 5px 0;
border-bottom:1px solid #ddd;
background:#eee;
}
.tab li {
float:left;
padding:2px 20px 5px;
}
.tab li:hover {
margin-bottom:-1px; /*用于盖住ul的下边框*/
font-weight:bold;
background:#FFF;
border:1px solid #ddd;
border-bottom:none;
}
.tab li a, .tab li a:visited {
padding:5px 0;
color:#333;
text-decoration:none;
}
.tab li a:hover {
color:#FF0000;
text-decoration:underline;
}
.tab div { padding:10px; }
.tab div p { line-height:2em; }
.clearfix:after {
content: "\20";
clear: both;
height: 0;
visibility: hidden;
display: block;
}
.clearfix { *zoom:1; }
</style>
</head>
<body>
<div class="tab">
<ul class="clearfix">
<li><a href="#">公告</a></li>
<li><a href="#">规则</a></li>
<li><a href="#">论坛</a></li>
<li><a href="#">安全中心</a></li>
<li><a href="#">公益</a></li>
</ul>
<div class="ct" style="clear:both;">
<p>内容1 </p>
<p>内容1</p>
</div>
<div class="ct">
<p>内容2 </p>
<p>内容2</p>
</div>
<div class="ct">
<p>内容3 </p>
<p>内容3</p>
</div>
<div class="ct">
<p>内容4 </p>
<p>内容4</p>
</div>
<div class="ct">
<p>内容5 </p>
<p>内容5</p>
</div>
<script type="text/javascript">
document.getElementsByClassName = function () {
var tTagName = "*";
if (arguments.length > 1) {
tTagName = arguments[1];
}
if (arguments.length > 2) {
var pObj = arguments[2]
}
else {
var pObj = document;
}
var objArr = pObj.getElementsByTagName(tTagName);
var tRObj = new Array();
for (var i = 0; i < objArr.length; i++) {
if (objArr[i].className == arguments[0]) {
tRObj.push(objArr[i]);
}
}
return tRObj;
}
var lia = document.getElementsByTagName("li");
var elema = document.getElementsByClassName("ct");
for (var i = 0; i < lia.length; i++) {
lia[i].onmouseover = function () {
for (var j = 0; j < elema.length; j++) {
elema[j].style.display = "none";
}
for (var k = 0; k < lia.length; k++) {
if (this == lia[k])
break;
}
elema[k].style.display = "block";
}
}
</script>
</div>
</body>
</html>
下面的代码讲JavaScript与HTML代码混杂在一起，可读性稍微差一点：
<!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>tab</title>
<style type="text/css">
ul, li, p { margin:0; padding:0; }
body { font:12px/1.5em arial; }
#tab { border:1px solid #D5D5D5; }
#tab ul {
list-style:none;
padding:4px 5px 0;
border-bottom:1px solid #ddd;
background:#eee;
}
#tab li {
float:left;
padding:2px 20px 5px;
}
#tab li:hover {
margin-bottom:-1px; /*用于盖住ul的下边框*/
font-weight:bold;
background:#FFF;
border:1px solid #ddd;
border-bottom:none;
}
#tab li a, #tab li a:visited {
padding:5px 0;
color:#333;
text-decoration:none;
}
#tab li a:hover {
color:#FF0000;
text-decoration:underline;
}
#tab div { padding:10px; }
#tab div p { line-height:2em; }
.clearfix:after {
content: "\20";
clear: both;
height: 0;
visibility: hidden;
display: block;
}
.clearfix { *zoom:1; }
</style>
<script type="text/javascript">
function showct(value)
{
for(var i=1;i<6;i++)
{
document.getElementById("ct"+i).style.display = "none";
}
document.getElementById(value).style.display = "block";
}
</script>
</head>
<body onload="showct('ct2');">
<div id="tab">
<ul class="clearfix">
<li onmouseover="showct('ct1');"><a href="#">公告</a></li>
<li onmouseover="showct('ct2');"><a href="#">规则</a></li>
<li onmouseover="showct('ct3');"><a href="#">论坛</a></li>
<li onmouseover="showct('ct4');"><a href="#">安全中心</a></li>
<li onmouseover="showct('ct5');"><a href="#">公益</a></li>
</ul>
<div id="ct1" style="clear:both;">
<p>内容1 </p>
<p>内容1</p>
</div>
<div id="ct2">
<p>内容2 </p>
<p>内容2</p>
</div>
<div id="ct3">
<p>内容3 </p>
<p>内容3</p>
</div>
<div id="ct4">
<p>内容4 </p>
<p>内容4</p>
</div>
<div id="ct5">
<p>内容5 </p>
<p>内容5</p>
</div>
</div>
</body>
</html>