Maison > interface Web > js tutoriel > le corps du texte

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

php中世界最好的语言
Libérer: 2018-04-26 09:44:19
original
4807 Les gens l'ont consulté

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');
    }
  });
});
Copier après la connexion

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>
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal