Implémentation du changement de navigation par défilement des onglets (avec code)

Cette fois, je vais vous présenter l'implémentation du changement de navigation par défilement d'onglets (avec code). Quelles sont les précautions pour implémenter le changement de navigation par défilement d'onglets Voici un cas pratique, jetons un coup d'œil.

Description de l'effet : Cliquez sur l'onglet de navigation et la page glissera vers la section correspondante ci-dessous. Et lorsque la page défile vers le bas avec la souris, l'onglet ci-dessus peut également basculer automatiquement vers la section à l'emplacement actuel.

Description du code : Écrivez deux actions séparément dans js, l'une consiste à cliquer sur l'onglet et à glisser vers le bas la section correspondante Position 1 est lorsque la souris défile vers le bas, l'onglet détermine la hauteur de défilement de la page actuelle et change d'onglet.
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>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres. articles connexes sur le site php chinois !

Lecture recommandée :

jQuery est l'implémentation la plus simple du changement d'option d'onglet

implémentation jQuery+CSS du changement de colonne d'onglet (ci-joint) Code)

jQuery+Ajax implémente le tri des titres des données de table

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!