Tab scroll navigation switching implementation (with code)-JS Tutorial-php.cn

Tab scroll navigation switching implementation (with code)

php中世界最好的语言

Release： 2018-04-26 09:44:19

Original

4799 people have browsed it

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');
    }
  });
});

Copy after login

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>

Copy after login

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!