简洁实用的TAB选项卡

//CSS代码部分

#lib_Tab1{width:980px;margin:0px;padding:0px;}

.lib_Menubox {height:28px;line-height:28px;position:relative;}
.lib_Menubox ul{margin:0px;padding:0px;list-style:none; top:3px; left:0; margin-left:10px; height:25px;text-align:center;}
.lib_Menubox li{
float:left;
display:block;
cursor:pointer;
width:180px;
margin-right:8px;
height:30px;
line-height:25px;
background-color:#05A;
color:#F7F7F7;
font-size:16px;
font-weight:bold;

}
.lib_Menubox li.hover{
font-size:16px;
font-weight:bold;
background:#fff;
display:block;
width:200px;
height:30px;
line-height:25px;
background-color:#004080;
}
.lib_Contentbox{clear:both;margin-top:0px; border-top:none;height:181px; text-align:left;padding-top:8px; padding-left:8px;}
.lib_Contentbox li {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: dashed;
border-left-style: none;
border-top-color: #E0E0E0;
border-right-color: #E0E0E0;
border-bottom-color: #E0E0E0;
border-left-color: #E0E0E0;
width:450px; line-height:24px;

}

//JS代码部分

<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>

//HTML代码部分

<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 id="one3" onClick="setTab('one',3,4)">旅游分销系统</li>
          <li id="one4" onClick="setTab('one',4,4)">直客版旅行社网站</li>
        </ul>
      </div>
      <div class="lib_Contentbox lib_tabborder">
        <div id="con_one_1"  style="margin-top:25px;"> [ecmsinfo]3,6,50,0,0,14,0,0,0[/ecmsinfo] </div>
        <div id="con_one_2"   style="margin-top:25px;display:none"> [ecmsinfo]4,6,50,0,0,14,0,0,0[/ecmsinfo] </div>
        <div id="con_one_3" style="margin-top:25px;display:none"> [ecmsinfo]5,6,50,0,0,14,0,0,0[/ecmsinfo] </div>
        <div id="con_one_4" style="margin-top:25px;display:none">
          <table width="98%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td align="center"><a href="/about/map.html" target="_blank"><img src="/skin/wanjia2/images/map.gif" alt="万家版图"   height="180" border="0"></a></td>
            </tr>
          </table>
        </div>
      </div>
    </div>