选项卡切换

扫码查看
demo: http://jellyandjammy.sinaapp.com/tab/demo.html
选项卡切换-LMLPHPtab.rar

html代码:
  1. <div class="box">
  2.     <div class="tab">    
  3.         <div class="tabNav">
  4.               <span class="on">tab1</span>
  5.             <span>tab2</span>
  6.             <span>tab3</span>
  7.             <span>tab4</span>
  8.             <span>tab5</span>
  9.             <span>tab6</span>
  10.         </div>
  11.         <div class="tabCt">
  12.             <div class="tabCt1">1</div>
  13.             <div class="tabCt2">2</div>
  14.             <div class="tabCt3">3</div>
  15.             <div class="tabCt4">4</div>
  16.             <div class="tabCt5">5</div>
  17.             <div class="tabCt6">6</div>                
  18.         </div>    
  19.     </div>
  20. </div>
jq代码:

  1.    $(function(){
  2.         $.each($('.tabNav span'),function(i,span){
  3.             $(span).click(function(){
  4.                 $(this).addClass('on').siblings().removeClass('on');
  5.                 $('.tabCt>div').eq(i).show().siblings().hide();
  6.             })
  7.         })
  8.     })



09-09 03:51
查看更多