用Juery实现网页选项卡

首先前台代码

View Code

   
     

    
       1 
    
      <
    
      div 
    
      class
    
      =
    
      "
    
      tab
    
      "
    
      >
    
      

    
       2 
    
       
    
      <
    
      div 
    
      class
    
      =
    
      "
    
      tab_menu
    
      "
    
      >
    
      

    
       3 
    
       
    
      <
    
      ul
    
      >
    
      

    
       4 
    
       
    
      <
    
      li 
    
      class
    
      =
    
      "
    
      selected
    
      "
    
      >
    
      个人信息
    
      </
    
      li
    
      >
    
      

    
       5 
    
       
    
      <
    
      li 
    
      class
    
      =
    
      "
    
      selected
    
      "
    
      >
    
      我的照片
    
      </
    
      li
    
      >
    
       

    
       6 
    
       
    
      <
    
      li 
    
      class
    
      =
    
      "
    
      selected
    
      "
    
      >
    
      我的博客
    
      </
    
      li
    
      >
    
      

    
       7 
    
       
    
      <
    
      div 
    
      class
    
      =
    
      "
    
      clear
    
      "
    
      ></
    
      div
    
      >
    
      

    
       8 
    
       
    
      </
    
      ul
    
      >
    
      

    
       9 
    
       
    
      </
    
      div
    
      >
    
      

    
      10 
    
       
    
      <
    
      div 
    
      class
    
      =
    
      "
    
      tab_box
    
      "
    
      >
    
      

    
      11 
    
       
    
      <
    
      div 
    
      class
    
      =
    
      "
    
      box
    
      "
    
      >
    
      我的QQ:
    
      1511109272
    
      </
    
      div
    
      >
    
      

    
      12 
    
       
    
      <
    
      div 
    
      class
    
      =
    
      "
    
      box hide
    
      "
    
      >
    
      hi 
    
      </
    
      div
    
      >
    
      

    
      13 
    
       
    
      <
    
      div 
    
      class
    
      =
    
      "
    
      box hide
    
      "
    
      >
    
       hello 
    
      <
    
      br
    
      >
    
       
    
      </
    
      div
    
      >
    
      

    
      14 
    
       
    
      </
    
      div
    
      >
    
      

    
      15 
    
       
    
      </
    
      div
    
      >
   
     

接着可以jquery代码设置

View Code

   
     

    
       1 
    
       $(function() {

    
       2 
    
       
    
      //
    
      网页选项卡的切换
    
      

    
       3 
    
       
    
       var $menu_li 
    
      =
    
       $(
    
      "
    
      div.tab_menu ul li
    
      "
    
      );

    
       4 
    
       $menu_li.click(function(){

    
       5 
    
       $(
    
      this
    
      ).addClass(
    
      "
    
      selected
    
      "
    
      ) 
    
      //
    
      当前<li>高亮
    
      

    
       6 
    
       
    
       .siblings().removeClass(
    
      "
    
      selected
    
      "
    
      ); 
    
      //
    
      去掉其它同辈<li>的高亮
    
      

    
       7 
    
       
    
       var index 
    
      =
    
       $menu_li.index( $(
    
      this
    
      ) ); 
    
      //
    
      找到<li>子节点的索引
    
      

    
       8 
    
       
    
       $(
    
      "
    
      div.tab_box > div
    
      "
    
      ) 
    
      //
    
      索引为N的DIV显示出来
    
      

    
       9 
    
       
    
       .eq(index).show()

    
      10 
    
       .siblings().hide();

    
      11 
    
       })

    
      12 
    
      })
   
     

然后CCS样式可以设置一下

View Code

   
     

    
       1 
    
      .clear{ clear:both; height:0px; overflow:hidden;}

    
       2 
    
      .tab{ width:400px; font
    
      -
    
      size:12px;}

    
       3 
    
      .tab_menu ul{ padding:0px;margin:0px;}

    
       4 
    
      .tab_menu li{ list
    
      -
    
      style:none; display:block; 
    
      float
    
      :left;

    
       5 
    
       background:#C2CEFE; height:22px; line
    
      -
    
      height:22px;

    
       6 
    
       padding: 0px 8px; margin
    
      -
    
      right:6px; border:#86B4CA 1px solid;

    
       7 
    
       }

    
       8 
    
      .box{ width:400px; height:200px; overflow:hidden; border:#A8C9D9 1px solid; padding:10px 8px; }

    
       9 
    
      .tab_menu ul li.selected{background:#dadada; cursor:pointer; }

    
      10 
    
      .hide{ display:none;}