当前位置：首页 → 问答吧 → 一段 TAB代码，如何修改让他具备一个功能，请看内容

一段 TAB代码，如何修改让他具备一个功能，请看内容

时间：2011-09-20

来源：互联网

下面这段代码，是一段TAB 切换标签的代码。有：标题、内容、更多按钮。

要如何做，才能点击标题后让内容和更多按钮同时对应切换？
PHP code

<style type="text/css">
<!--
/*选项卡1*/
#lib_Tab1{width:374px;margin:0px;padding:0px;margin-bottom:0px;}
/*菜单class*/
.lib_tabborder{border:0px solid #95C9E1;}
.lib_Menubox {height:28px;line-height:28px;position:relative;}

.lib_Menubox ul{margin:0px;padding:0px;list-style:none; position:absolute; top:0px; left:0; margin-left:0px; height:28px;text-align:center;}
.lib_Menubox li{float:left;display:block;cursor:pointer;width:116px;color:#949694;font-weight:bold; font-size:14px; margin-right:0px;height:25px;line-height:25px; background:url(new_tab.gif); margin-top:3px;}
.lib_Menubox li.hover{padding:0px; background:url(new_tab1.gif);width:116px;border-left:0px solid #95C9E1;border-top:0px solid #95C9E1;border-right:0px solid #95C9E1; margin-top:0px;color:#fff;height:28px;line-height:28px;}
.lib_Contentbox{clear:both;margin-top:0px; border-top:none;height:120px; text-align:center; font-size:12px;padding-top:8px;}
-->
</style>
<script>
<!--
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?"hover":"";
  con.style.display=i==cursel?"block":"none";
 }
}
//-->
</script>

<div id="lib_Tab1">
<div class="lib_Menubox lib_tabborder">
<ul>
   <li id="one1" onclick="setTab('one',1,4)" class="hover">本站新闻</li>
   <li id="one2" onclick="setTab('one',2,4)" >技术支持</li>
   <li style="background:#FFFFFF; text-align:right; border-bottom:1px dashed #999999;  width:139px; height:24px; line-height:24px;">
   <div id="con_one_1" >更多1</div>
   <div id="con_one_2" style="display:none">更多2</div>
   </li>
   </ul>
</div>
 <div class="lib_Contentbox lib_tabborder">  
   <div id="con_one_1" >本站新闻--内容</div>
   <div id="con_one_2" style="display:none">技术支持--内容</div>
 </div>
</div>