Implementierung zum Umschalten der Tab-Scroll-Navigation (mit Code)

Dieses Mal werde ich Ihnen die Implementierung des Tab-Scroll-Navigationswechsels (mit Code) vorstellen. Was sind die Vorsichtsmaßnahmen für die Implementierung des Tab-Scroll-Navigationswechsels?

Wirkungsbeschreibung: Klicken Sie auf die Tab-Navigation und die Seite wird zum entsprechenden Abschnitt unten verschoben. Und wenn die Seite mit der Maus 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 nach unten zu schieben Die entsprechende Abschnittsposition ist: Wenn die Maus nach unten scrollt, bestimmt die Registerkarte die Bildlaufhöhe der aktuellen Seite und wechselt die Registerkarte.
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;
        }
      }
      $(&#39;.switch-tab>li:eq('+s+')').addClass('active').siblings().removeClass('active');
    }
  });
});

html:

<p 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>
</p>
<p class="tab-content">
  <p class="tab-panel" id="cpxq">
    1111
  </p>
  <p class="tab-panel" id="cpxq">
    222
  </p>
  <p class="tab-panel" id="cpxq">
    333
  </p>
  <p class="tab-panel" id="cpxq">
    444
  </p>
</p>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zum Thema PHP chinesische Website!

Empfohlene Lektüre:

jQuery ist die einfachste Implementierung des Wechsels von Tab-Optionen

jQuery+CSS-Implementierung des Wechsels von Tab-Spalten (angehängter) Code)

jQuery+Ajax implementiert die Titelsortierung von Tabellendaten

Das obige ist der detaillierte Inhalt vonImplementierung zum Umschalten der Tab-Scroll-Navigation (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!