Jquery: edit the Tab, scroll navigation, and switch special effects. jquerytab

Jquery: edit the Tab, scroll navigation, and switch special effects. jquerytab

In this article, we will share with you how to compile the Tab switch special effect for jquery for your reference. 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<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 :; "> latto wine </a> </li> <a href =" javascript :; "> French winery style </a> </li> <a href =" javascript :; "> wine packaging </a> </li> <a href =" javascript :; "> personalized 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>

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

Articles you may be interested in:

• JQuery Tab effect code Ultimate Edition
• JQuery-based six Tab plug-ins
• Dynamic Effect TAB jquery plugin
• Code for a navigation scroll effect implemented by jquery
• Jquery scrollTop method hide top navigation bar based on scrolling pixel display
• Use jQuery to implement navigation bar switching and display hidden instance code
• JQuery implementation example of background switching of a navigation bar
• JQuery top navigation follows the scroll bar and is fixed to floating on the top
• Responds to browser scroll bar events based on the navigation fixed on the top of jquery
• How to Implement the tab effect using jQuery