博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

选项卡小实例

Posted on 2009-07-23 08:28  小鞠  阅读(162)  评论(0)    收藏  举报

 <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 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> 
  <!--Tab全部begin-->
  <div id="con_one_1">
  全部
  </div>
  <div id="con_one_2">
  第一
  </div>
  <div id="con_one_3">
  第二
  </div>
  <div id="con_one_4">
  第三
  </div>