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


Posted in Javascript onJuly 17, 2020

本文实例为大家分享jquery编写Tab选项卡切换特效,供大家参考,具体内容如下

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

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

jquery编写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<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:; ">拉托红酒</a></li>
  <li><a href="javascript:; ">法国酒庄风情</a></li>
  <li><a href="javascript:; ">红酒包装</a></li>
  <li><a href="javascript:; ">个性定制</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>

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
javascript 一些用法小结
Sep 11 Javascript
JavaScript实现图片DIV竖向滑动的方法
Apr 25 Javascript
JS自定义选项卡函数及用法实例分析
Sep 02 Javascript
关于iframe跨域POST提交的方法示例
Jan 15 Javascript
Vue 过渡实现轮播图效果
Mar 27 Javascript
详解RequireJS按需加载样式文件
Apr 12 Javascript
使用Vue写一个datepicker的示例
Jan 27 Javascript
Vue.js组件高级特性实例详解
Dec 24 Javascript
vue滚动固定顶部及修改样式的实例代码
May 30 Javascript
vue vant Area组件使用详解
Dec 09 Javascript
Vue中用JSON实现刷新界面不影响倒计时
Oct 26 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
Oct 30 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
Apr 07 #Javascript
jQuery实现简单滚动动画效果
Apr 07 #Javascript
基于javascript bootstrap实现生日日期联动选择
Apr 07 #Javascript
原生js制作日历控件实例分享
Apr 06 #Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
Apr 06 #Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
Apr 06 #Javascript
jQuery实现内容定时切换效果完整实例
Apr 06 #Javascript
You might like
提升PHP性能的21种方法介绍
2013/06/25 PHP
两种php给图片加水印的实现代码
2020/04/18 PHP
详解EventDispatcher事件分发组件
2016/12/25 PHP
js变量、作用域及内存详解
2014/09/23 Javascript
Javascript数组与字典用法分析
2014/12/13 Javascript
JavaScript页面模板库handlebars的简单用法
2015/03/02 Javascript
Javascript函数的参数
2015/07/16 Javascript
jQuery soColorPacker 网页拾色器
2016/06/22 Javascript
Vue+axios 实现http拦截及路由拦截实例
2017/04/25 Javascript
完美实现js拖拽效果 return false用法详解
2017/07/28 Javascript
es6在react中的应用代码解析
2017/11/08 Javascript
你点的 ES6一些小技巧,请查收
2018/04/25 Javascript
layer插件select选中默认值的方法
2018/08/14 Javascript
详解NodeJS Https HSM双向认证实现
2019/03/12 NodeJs
微信小程序webview 脚手架使用详解
2019/07/22 Javascript
vue 中 命名视图的用法实例详解
2019/08/14 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
2020/02/07 Javascript
[03:12]TI9战队档案 - Virtus Pro
2019/08/20 DOTA
python实现数通设备tftp备份配置文件示例
2014/04/02 Python
Python中optparse模块使用浅析
2015/01/01 Python
利用python将json数据转换为csv格式的方法
2018/03/22 Python
python使用递归的方式建立二叉树
2019/07/03 Python
python内存监控工具memory_profiler和guppy的用法详解
2019/07/29 Python
python新手学习使用库
2020/06/11 Python
GAP美国官网:美国休闲时尚品牌
2016/08/26 全球购物
Stuart Weitzman欧盟:美国奢华鞋履品牌
2017/05/24 全球购物
Hunkemöller瑞士网上商店:欧洲最大的内衣品牌之一
2018/12/03 全球购物
伊莱克斯阿根廷网上商店:Tienda Electrolux
2021/03/08 全球购物
技校毕业生自荐信
2014/06/03 职场文书
杜甫草堂导游词
2015/02/03 职场文书
教师个人发展总结
2015/02/11 职场文书
暂停营业通知
2015/04/25 职场文书
房产销售员2015年终工作总结
2015/10/22 职场文书
浅谈pytorch中的dropout的概率p
2021/05/27 Python
CSS使用伪类控制边框长度的方法
2022/01/18 HTML / CSS
解决MySQL添加新用户-ERROR 1045 (28000)的问题
2022/03/03 MySQL