要求：
实现一个可切换的tab标签。如下图所示：
方法和步骤：
其实tab标签是由2个部分组成的。一个是标签部分，一个是内容部分。如下图中红色框所示：
1.实现标签部分。
假设实现4个tab,则可以通过css来实现水平排列的4个标签。设置2种样式，一种样式（记为on）用于标签被选中的时候，一种样式(记为off)用于标签没被选中的时候。默认第一个标签设置on的样式，其他的标签设置off的样式。
2.实现内容部分
类似第1步，创建4个div分别对应4个tab，每个div都有相应的内容。同样，设置2种样式，一种样式是用于显示的(记为show)，另一种样式用于不显示的（记为unshow）。由于默认第一个tab被选择，因此我们设置其对应的第一个div的样式为show,其他的div的样式设置为unshow。
3.控制tab的切换
经过前面2步后，我们已经实现了一个不能切换的tab，接下来要做的是通过js来实现tab的切换。即当选择某一个tab时，显示相应的div的内容。实现方法是：当选择某一个tab时，获得其编号（设为i），然后将第i个tab的样式设置为on，其他的样式设置为off ;同时，将第i个div的样式设置为show，其他的div的样式设置为unshow。
具体代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
#tab {
width:392px;
border:1px solid #CCC;
position:relative;
}
p{
float:left;
display :inline;
position:relative;
cursor:pointer;
width:100px;
height:30px;
font-size:14px;
text-align:center;
margin:0 -3px 0 0;
}
.on{
background:url(images/tab_on.gif) no-repeat;
}
.off{
background:url(images/tab_off.gif) no-repeat;
}
div{
top:10px;
width:392px;
position:relative;
}
.show{
display:block;
}
.unshow{
display:none;
}
li{
display:block;
}
</style>
<script type="text/javascript">
function go(el){
var pre=0;
var current=0;
var hs = document.getElementsByTagName("h3");
for(var i = 0;i<hs.length;i++){
if(hs[i].className=="on"){
hs[i].className="off";
pre = i;
}
if(hs[i]==el){
hs[i].className="on";
current = i;
}
}
var ds = document.getElementsByTagName("div");
ds[pre].className="unshow";
ds[current].className="show";
}
</script>
</head>
<body id="tab">
<!-- start 标签部分 -->
<p class = "on" onclick="go(this);">标签一</p>
<p class = "off" onclick="go(this);">标签二</p>
<p class = "off" onclick="go(this);">标签三</p>
<p class = "off" onclick="go(this);">标签四</p>
<!-- end 标签部分 -->
<!-- start 内容部分 -->
<div class="show">
<ul>
<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>
<li><a href="#">标签一标签一标签一标签一标签一</a></li>
</ul>
</div>
<div class ="unshow">
<ul>
<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>
<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>
<li><a href="#">标签二标签二标签二标签二标签二</a></li>
<li><a href="#">标签二标签二标签二标签二标签二</a></li>
</ul>
</div>
<div class ="unshow">
<ul>
<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>
<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>
<li><a href="#">标签三标签三标签三标签三标签三标签三 </a></li>
</ul>
</div>
<div class ="unshow">
<ul>
<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>
<li><a href="#">标签四标签四标签四标签四标签四标签四 </a></li>
</ul>
</div>
<!-- end 内容部分 -->
</body>
</html>