Tab标签的实现方法
要求：
实现一个可切换的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>