jquery write tab tab scrolling navigation toggle effect _jquery

This article for you to share the JQuery writing tab tab switch Special effects, for your reference, the specific contents are as follows

Effect Description: Click the tab navigation, the page slide to the corresponding plate below. And when the page scrolling through the mouse, the top tab can also automatically switch to the current position of the plate.

code Description:JS Two actions are written separately, one is tab click Down to the corresponding plate position; one is the mouse scrolling down tab determines the current page scrolling height toggle tab.
Js:

 $ (document). Ready (function () {$ ('. Switch-tab>li '). Click (function () {var s=$ ('. S
    Witch-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:; "> Rato red wine </a></li>
    <li><a href=" javascript:; "> French Chateau Style </a></li>
    <li><a href=" javascript:; "> Red wine Packaging </a></li>
    <li><a href=" javascript:; "> Personality customization </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>

The above is the entire content of this article, I hope to help you learn.