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 中对象的继承〔转贴〕
Jan 22 Javascript
js 链式延迟执行DOME
Jan 04 Javascript
jQuery循环滚动新闻列表示例代码
Jun 17 Javascript
纯js代码实现简单计算器
Dec 02 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
Dec 14 Javascript
vue.js获取数据库数据实例代码
May 26 Javascript
通过构造函数实例化对象的方法
Jun 28 Javascript
JS脚本加载后执行相应回调函数的操作方法
Feb 28 Javascript
AngularJS发送异步Get/Post请求方法
Aug 13 Javascript
layui递归实现动态左侧菜单
Jul 26 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
Oct 11 Javascript
Vue 事件的$event参数=事件的值案例
Jan 29 Vue.js
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银联网页支付实现方法
2015/03/04 PHP
php文件管理基本功能简单操作
2017/01/16 PHP
PHP实现八皇后算法
2019/05/06 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
图片自动更新(说明)
2006/10/02 Javascript
使用js显示当前时间示例
2014/03/02 Javascript
jQuery里filter()函数与find()函数用法分析
2015/06/24 Javascript
JavaScript数据类型判定的总结笔记
2015/07/31 Javascript
基于jquery实现简单的手风琴特效
2015/11/24 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
2016/09/14 Javascript
easyui导出excel无法弹出下载框的快速解决方法
2016/11/10 Javascript
node.js操作MongoDB的实例详解
2017/10/11 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
2019/05/28 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
2020/07/17 Javascript
Python获取DLL和EXE文件版本号的方法
2015/03/10 Python
Python的Flask框架中SQLAlchemy使用时的乱码问题解决
2015/11/07 Python
分分钟入门python语言
2018/03/20 Python
Python列表解析配合if else的方法
2018/06/23 Python
Python读取mat文件,并保存为pickle格式的方法
2018/10/23 Python
对matplotlib改变colorbar位置和方向的方法详解
2018/12/13 Python
使用python脚本自动生成K8S-YAML的方法示例
2020/07/12 Python
利用Python实现学生信息管理系统的完整实例
2020/12/30 Python
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
2020/05/26 HTML / CSS
日本高岛屋百货购物网站:TAKASHIMAYA
2019/03/24 全球购物
main 函数执行以前,还会执行什么代码
2013/04/17 面试题
接口的多继承会带来哪些问题
2015/08/17 面试题
JVM是一个编译程序还是解释程序
2012/09/11 面试题
材料采购员岗位职责
2013/12/17 职场文书
《回乡偶书》教学反思
2014/04/12 职场文书
知识竞赛拉拉队口号
2014/06/16 职场文书
生日答谢词
2015/01/05 职场文书
如何写通讯稿
2015/07/22 职场文书
《日月潭》教学反思
2016/02/20 职场文书
每日六道java新手入门面试题,通往自由的道路
2021/06/30 Java/Android
使用Redis实现点赞取消点赞的详细代码
2022/03/20 Redis
美国运营商 T-Mobile 以 117.83Mb/s 的速度排第一位
2022/04/21 数码科技