Edit the Tab in jquery and scroll navigation switch special effect _ jquery

This article mainly introduces in detail the special effects of Tab rolling navigation switching in jquery, which has some reference value, if you are interested, refer to the examples in this article to share with you how to compile the Tab switch special effect for jquery. The specific content is as follows:

Effect description:Click the tab and navigate to the corresponding section below. When the page is scroll down with the mouse, the tab on the top can be automatically switched to the plate at the current position.

Code Description:In js, the two actions are respectively written. One is that the tab is clicked to the position of the corresponding section, and the other is that when the mouse is scroll down, the tab determines the height of the current page to switch to 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
 
  =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
  
   =parseInt(l.eq(i).offset().top-50)&&wt
   
    li:eq('+s+')').addClass('active').siblings().removeClass('active');    }  });});
   
  
 

Html:

  
 
 
    
  
  
Latto red wine
    
  
  
French winery Style
    
  
  
Wine Packaging
    
  
  
Personalized customization
  
 
 
  
1111
  
222
  
333
  
444

The above is all the content of this article, hoping to help you learn.