php 实现tab切换_Tab选项卡滚动导航切换实现（附代码）

这次给大家带来Tab选项卡滚动导航切换实现(附代码)，Tab选项卡滚动导航切换实现的注意事项有哪些，下面就是实战案例，一起来看一下。

效果说明：点击tab导航，页面滑动到下方相应板块。并且当页面通过鼠标滚动下去时，上方的tab也可以自动切换到当前位置的板块上。

代码说明：js中对两个动作分别写，一个是tab点击下滑到相应板块位置；一个是鼠标滚动下去的时候tab判定当前页面滚动高度切换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

if(wt>=parseInt(l.eq(i).offset().top-50)&&wt

s=i;

break;

}

}

$('.switch-tab>li:eq('+s+')').addClass('active').siblings().removeClass('active');

}

});

});

html：

拉托红酒 法国酒庄风情 红酒包装 个性定制

1111

222

333

444

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：