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 选项卡更强悍 , 但暂时米有找到 . 待续 . . .