数字排行Tab效果

XHTML

<div class="box">
  <h3><strong>关注最多</strong> </h3>
  <div class="box_title">
    <ul>
      <li id="menu1" onClick="setTab('menu',1,2)" class="hover" >本周</li>
      <li id="menu2" onClick="setTab('menu',2,2)">本月</li>
    </ul>
  </div>
  <div  id="con_menu_1">
    <ul>
      <li><a href="#">职场帮测试：什么时候是你的最佳创(8)</a></li>
      <li><a href="#">职场帮测试：什么时候是你的最佳创(8)</a></li>
      <li><a href="#">职场帮测试：什么时候是你的最佳创(8)</a></li>
      <li><a href="#">职场帮测试：什么时候是你的最佳创(8)</a></li>
      <li><a href="#">职场帮测试：什么时候是你的最佳创(8)</a></li>
      <li><a href="#">职场帮测试：什么时候是你的最佳创(8)</a></li>
      <li><a href="#">职场帮测试：什么时候是你的最佳创(8)</a></li>
      <li><a href="#">职场帮测试：什么时候是你的最佳创(8)</a></li>
      <li><a href="#">职场帮测试：什么时候是你的最佳创(8)</a></li>
      <li><a href="#">职场帮测试：什么时候是你的最佳创(8)</a></li>
    </ul>
  </div>
  <div id="con_menu_2" style="display:none;">
    <ul>
      <li><a href="#">1：什么时候是你的最佳创(8)</a></li>
      <li><a href="#">2：什么时候是你的最佳创(8)</a></li>
      <li><a href="#">职场帮测试：什么时候是你的最佳创(8)</a></li>
      <li><a href="#">职场帮测试：什么时候是你的最佳创(8)</a></li>
      <li><a href="#">职场帮测试：什么时候是你的最佳创(8)</a></li>
      <li><a href="#">职场帮测试：什么时候是你的最佳创(8)</a></li>
      <li><a href="#">职场帮测试：什么时候是你的最佳创(8)</a></li>
      <li><a href="#">职场帮测试：什么时候是你的最佳创(8)</a></li>
      <li><a href="#">职场帮测试：什么时候是你的最佳创(8)</a></li>
      <li><a href="#">职场帮测试：什么时候是你的最佳创(8)</a></li>
    </ul>
  </div>
</div>

JavaScript

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

CSS

.box{}
.box h3{background:#f7f7f7;height:30px;line-height:30px;text-indent:4px;color:#666;}
.box ul{background:url(HTTP://www.zhichangbang.com/images/num.gif) no-repeat  0 5px;width:95%;font-size:12px;margin:5px 3px 3px;}
.box ul li{line-height:24px;font-size:12px;text-indent:18px;}
.box ul li a{color:#666;}
.box ul li a:hover{color:#ff0000;}
.box_title{float:right;margin-top:-28px;position:absolute;margin-left:-80px;}
.box_title ul{background:none;}
.box_title ul li{float:left;background:#fff;width:32px;margin:0 0 0px 3px;display:block;cursor:pointer;text-align:center;text-indent:0px;}
.box_title ul li.hover{background:#f7f7f7;color:#e2492a;}