Tab scroll navigation switching implementation (with code)

This time I will bring you the implementation of Tab scrolling navigation switching (with code). What are the precautions for implementing Tab scrolling navigation switching. The following is a practical case, let's take a look.

Effect description: Click the tab navigation, and the page slides to the corresponding section below. And when the page is scrolled down with the mouse, the tab above can also automatically switch to the section at the current location.

Code description: Write two actions separately in js, one is to click the tab and slide down to the corresponding section Position; one is when the mouse scrolls down, the tab determines the scroll height of the current page and switches the 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;
        }
      }
      $(&#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>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

jQuery is the simplest implementation of tab option switching

jQuery CSS implementation of tab column switching (with code )

jQuery Ajax implements table data title sorting

The above is the detailed content of Tab scroll navigation switching implementation (with code). For more information, please follow other related articles on the PHP Chinese website!