日常网站制作过程中，由于内容太多，所以我们经常使用到一个功能就是TAB选项，其实做成TAB有很多方法，Jquery库支持这个功能，一些程序员页可以写一个简单的JS来实现TAB的切换。今天开分享一个最简单的，也是大张力一直使用的JS实现网页多个TAB切换功能。
TAB切换JS代码如下：
//tab切换
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"tab-item current":"tab-item";
con.style.display=i==cursel?"block":"none";
}
}
有了这个JS库了之后就可以在网页的任何地方调用这个功能了,如果一个页面需要多个地方使用就如下：
<div class="area">
<div class="hd" id="lib_Tab9">
<h2 class="cred">本类排行</h2>
<div class="tabs tab3 r-tabs" id="tab-switch-rank"> <span class="tab-item current" id="nine1" onclick="setTab('nine',1,4)">点击</span> <span class="tab-item" id="nine2" onclick="setTab('nine',2,4)">最新</span> <span class="tab-item" id="nine3" onclick="setTab('nine',3,4)">推荐</span> </div>
</div>
<div class="bd" id="tab-switch-rank-body">
<ul class="list rank-list" id="con_nine_1">
[e:loop={'selfinfo',10,1,0,"","onclick desc"}]
<li><em class="ranknum rankred">
<?=$bqno?>
</em><a href="<?=$bqsr[titleurl]?>" target="_blank">
<?=$bqr[title]?>
</a></li>
[/e:loop]
</ul>
<ul class="list rank-list" style="display:none" id="con_nine_2">
[e:loop={'selfinfo',10,0,0,"","id desc"}]
<li><em class="ranknum rankred">
<?=$bqno?>
</em><a href="<?=$bqsr[titleurl]?>" target="_blank">
<?=$bqr[title]?>
</a></li>
[/e:loop]
</ul>
要使用的地方先<div class="hd" id="lib_Tab9">，每次每个地方不通，第一个id可以是id="lib_Tab1"，第二个id="lib_Tab2
下面则要注意的是每个TAB子类也是不一样的
<span class="tab-item current" id="nine1" onclick="setTab('nine',1,4)">点击</span>， id="nine3" onclick="setTab('nine',3,4)">推荐</span>