jquery menulis navigasi tatal tab menukar effect_jquery khas

Contoh dalam artikel ini adalah untuk berkongsi dengan anda kesan penukaran tab yang ditulis dalam jquery untuk rujukan anda. Kandungan khusus adalah seperti berikut

Penerangan kesan: Klik navigasi tab, dan halaman akan meluncur ke bahagian yang sepadan di bawah. Dan apabila halaman itu ditatal dengan tetikus, tab di atas juga boleh bertukar secara automatik ke bahagian di lokasi semasa.

Perihalan kod: Tulis dua tindakan secara berasingan dalam js, satu ialah mengklik tab dan slaid ke bawah ke kedudukan bahagian yang sepadan; satu lagi adalah untuk menentukan ketinggian tatal halaman semasa apabila tetikus menatal turun dan tukar 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>

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.