jquery編寫Tab選項卡滾動導航切換特效_jquery

本文執行個體為大家分享jquery編寫Tab選項卡切換特效，供大家參考，具體內容如下

效果說明：點擊tab導航，頁面滑動到下方相應板塊。並且當頁面通過滑鼠滾動下去時，上方的tab也可以自動切換到當前位置的板塊上。

代碼說明：js中對兩個動作分別寫，一個是tab點擊下滑到相應板塊位置；一個是滑鼠滾動下去的時候tab判定當前頁面滾動高度切換tab。
js：

$(document).ready(function(){    $('.switch-tab>li').click(function(){    var s=$('.switch-tab>li').index(this);    $('body,html').animate({scrollTop:$('.tab-content>.tab-panel:eq('+s+')').offset().top-50},200);  });  var DT=$('.switch-tab').offset().top;  $(window).scroll(function(){    var wt=$(window).scrollTop(),l=$('.tab-content>.tab-panel'),s=l.length-1;    if(wt<DT||wt>=l.last().offset().top+l.last().height()+50){      $('.switch-tab').removeClass('fixed');      $('.switch-tab>li:first').addClass('active').siblings().removeClass('active');    }else{      $('.switch-tab').addClass('fixed');      for(var i=0;i<s;i++){        if(wt>=parseInt(l.eq(i).offset().top-50)&&wt<parseInt(l.eq(i+1).offset().top-50)){          s=i;          break;        }      }      $('.switch-tab>li:eq('+s+')').addClass('active').siblings().removeClass('active');    }  });});

html：

<div class="switch-nav">  <ul class="switch-tab">    <li><a href="javascript:; ">拉托紅酒</a></li>    <li><a href="javascript:; ">法國酒莊風情</a></li>    <li><a href="javascript:; ">紅酒封裝</a></li>    <li><a href="javascript:; ">個性定製</a></li>  </ul></div><div class="tab-content">  <div class="tab-panel" id="cpxq">    1111  </div>  <div class="tab-panel" id="cpxq">    222  </div>  <div class="tab-panel" id="cpxq">    333  </div>  <div class="tab-panel" id="cpxq">    444  </div></div>

以上就是本文的全部內容，希望對大家的學習有所協助。