jquery schreibt Tab Scroll Navigation Switching Special Effects_jquery

Das Beispiel in diesem Artikel dient dazu, Ihnen die in jquery geschriebenen Tab-Wechseleffekte als Referenz mitzuteilen. Der spezifische Inhalt ist wie folgt

Wirkungsbeschreibung: Klicken Sie auf die Tab-Navigation und die Seite wird zum entsprechenden Abschnitt unten verschoben. Und wenn die Seite mit der Maus nach unten gescrollt wird, kann der Tab oben auch automatisch zum Abschnitt an der aktuellen Position wechseln.

Codebeschreibung: Schreiben Sie zwei Aktionen separat in js. Eine besteht darin, auf die Registerkarte zu klicken und zur entsprechenden Abschnittsposition zu schieben. Die andere besteht darin, die Bildlaufhöhe der aktuellen Seite zu bestimmen und die Registerkarten zu wechseln Die Maus scrollt nach unten.
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>

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.