第一个选项卡控制JS
function swap_tab(n){
for(var i=1;i<=5;i++){
var curC=document.getElementById("tab_"+i);
var curB=document.getElementById("tab_t"+i);
if(n==i){
curC.style.display="block";
curB.className="active"
}else{
curC.style.display="none";
curB.className="normal"
}
}
}
第二个选项卡控制JS
function swap_tab2(n){
for(var i=1;i<=5;i++){
var curC=document.getElementById("tab2_"+i);
var curB=document.getElementById("tab2_t"+i);
if(n==i){
curC.style.display="block";
curB.className="active"
}else{
curC.style.display="none";
curB.className="normal"
}
}
}
第三个选项卡控制JS
function swap_tab3(n){
for(var i=1;i<=5;i++){
var curC=document.getElementById("tab3_"+i);
var curB=document.getElementById("tab3_t"+i);
if(n==i){
curC.style.display="block";
curB.className="active"
}else{
curC.style.display="none";
curB.className="normal"
}
}
}
==================
以上为JS,颜色标记出分别为ID和选项卡数量。
==================
第一个选项卡
<div class="navtab">
<ul>
<li class=active id=tab_t1 onMouseOver="return swap_tab(1)"><a rel=adListContent1>工作室动态</a> </li>
<li class=normal id=tab_t2 onMouseOver="return swap_tab(2)"><a rel=adListContent1>日程安排</a> </li>
<li class=normal id=tab_t3 onMouseOver="return swap_tab(3)"><a rel=adListContent1>服务帮助</a> </li>
</ul>
</div>
<div class=navContent> 内容省略 </div>
第二个选项卡
<div class="navtab">
<ul>
<li class=active id=tab2_t1 onMouseOver="return swap_tab2(1)"><a rel=adListContent1>菏泽发展</a></li>
<li class=normal id=tab2_t2 onMouseOver="return swap_tab2(2)"><a rel=adListContent1>菏泽企业</a></li>
<li class=normal id=tab2_t3 onMouseOver="return swap_tab2(3)"><a rel=adListContent1>市场动态</a></li>
<li class=normal id=tab2_t4 onMouseOver="return swap_tab2(4)"><a rel=adListContent1>网络企业</a></li>
</ul>
</div>
<div class=navContent>内容省略 </div>
第三个省略
===================================
此教程有 科讯CMS非官方教程资料网 www.kexuncms.cn 提供。