jquery编写标签选项卡滚动导航切换特效

本文实例为大家分享框架编写标签选项卡切换特效，供大家参考，具体内容如下

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

代码说明：js中对两个动作分别写，一个是标签点击下滑到相应板块位置；一个是鼠标滚动下去的时候标签判定当前页面滚动高度切换标签。js:

$(文档)。ready(function(){ $(')).switch-tabli ').单击(函数(){ var s=$(').switch-tabli ').索引（这个);$("正文，html ).动画({scrollTop:$(').标签内容。选项卡面板： eq(' s ').偏移量()。前50名}、200名)；});var DT=$(' .切换标签').偏移量()。顶部；$(窗口)。滚动（函数(){ var wt=$(窗口))。scrollTop()，l=$(' .tab-content.tab-panel ')，s=l . length-1；if(wtDT||wt=l.last().偏移量()。top l.last().高度()50){ $('。切换标签').removeClass(“”固定');$('.switch-tabli:first ').addClass('active ').兄弟姐妹()。移除CLaSS(' active ')；}else{ $(' .切换标签').addClass(')固定');for(var I=0；是；i ){ if(wt=parseInt(l.eq(i)).偏移量()。前50名选手.偏移量()。top-50)){ s=I；打破；} } $('.switch-tabli:eq(' s ').addClass('active ').兄弟姐妹()。移除CLaSS(' active ')；} });});html:

div class=' switch-nav ' ul class=' switch-tab ' lia href=' JavaScript :'拉托红酒/a/Li lia href=' JavaScript :'法国酒庄风情/a/Li lia href=' JavaScript :'红酒包装/a/Li lia href=' JavaScript :'个性定制/a/Li/ul/div class=' tab-content ' div class=' tab-panel ' id=' cpxq ' 1111/div class=' tab-panel ' id=' cpxq ' 222/div class=' tab-panel ' id=' cpxq ' 333/div class=' tab-panel ' id=' cpxq ' 444/div/div以上就是本文的全部内容，希望对大家的学习有所帮助。