tab 标签选项卡

 1. css

body,div,ul,li{padding:0 auto;margin:0 auto; text-align:center;}
body{font:12px "宋体";text-align:center;}
a:link{color:#00F;text-decoration:none;}
a:visited {color: #00F;text-decoration:none;}
a:hover {color: #c00;text-decoration:underline;}
ul{ list-style:none;}
#Tab2{width:500px;margin:0px;padding:0px;margin:0 auto;}
.Menubox {margin:0px auto;padding:0px inherit;width:498px;height:23px;line-height:28px;border-top:1px solid #A8C29F;border-left:1px solid #A8C29F;border-right:1px solid #A8C29F;}
.Menubox ul{margin:0px;padding:0px auto;padding-left:20px;}
.Menubox li{float:left;display:block;cursor:pointer;width:115px;text-align:center;color:#949694;}
.Menubox li.hover{padding:0px;background:#000;width:116px;color:#fff;height:23px;line-height:23px;}
.Contentbox{clear:both;margin-top:0px;border:1px solid #A8C29F;border-top:none;height:181px;text-align:center;padding-top:8px;}

2.  页面代码 DIV

<div id="Tab2">
<div class="Menubox">
<ul>
   <li id="two1" οnmοuseοver="setTab('two',1,4)"  class="hover">新闻1</li>
   <li id="two2" οnmοuseοver="setTab('two',2,4)" >新闻2</li>
   <li id="two3" οnmοuseοver="setTab('two',3,4)">新闻3</li>  
   <li id="two4" οnmοuseοver="setTab('two',4,4)">新闻4</li>
</ul>
</div>
<div class="Contentbox"> 
   <div id="con_two_1" >新闻列表1</div>
   <div id="con_two_2" style="display:none">wang</div>
   <div id="con_two_3" style="display:none">wangding</div>
   <div id="con_two_4" style="display:none">wangdingjun</div>
</div>
</div>

3. 实现 TAB 选项卡切换的 JS 代码

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";
}
}

OK , TAB 选项卡的功能已经实现 , 有一个仿 慧聪 的 TAB 选项卡更强悍 , 但暂时米有找到 . 待续 . . .