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 相关文章推荐
ie 调试javascript的工具
Apr 29 Javascript
Iframe 自适应高度并实时监控高度变化的js代码
Oct 30 Javascript
基于jquery DOM写的类似微博发布的效果
Oct 20 Javascript
JQuery验证工具类搜集整理
Jan 16 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 Javascript
JavaScript表单焦点自动切换代码
Jul 24 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
Dec 11 Javascript
Vue精简版风格指南(推荐)
Jan 30 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
Apr 07 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
Aug 19 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
Oct 19 Javascript
javascript中的event loop事件循环详解
Dec 14 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
打造计数器DIY三步曲(下)
2006/10/09 PHP
CI框架源码阅读,系统常量文件constants.php的配置
2013/02/28 PHP
php post大量数据时发现数据丢失问题解决方法
2015/06/20 PHP
php实现PDO中捕获SQL语句错误的方法
2017/02/16 PHP
PHP面向对象程序设计__tostring()和__invoke()用法分析
2019/06/12 PHP
filemanage功能中用到的common.js
2007/04/08 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
2013/02/05 Javascript
JavaScript中的undefined学习总结
2013/11/30 Javascript
AngularJS入门教程之链接与图片模板详解
2016/08/19 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
2016/09/01 Javascript
NodeJS实现客户端js加密
2017/01/09 NodeJs
Vue插件打包与发布的方法示例
2018/08/20 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
2018/11/02 Javascript
html-webpack-plugin修改页面的title的方法
2020/06/18 Javascript
[02:42]DOTA2英雄基础教程 杰奇洛
2013/12/23 DOTA
[06:42]DOTA2每周TOP10 精彩击杀集锦vol.1
2014/06/25 DOTA
python持久性管理pickle模块详细介绍
2015/02/18 Python
Python多线程编程(三):threading.Thread类的重要函数和方法
2015/04/05 Python
python嵌套函数使用外部函数变量的方法(Python2和Python3)
2016/01/31 Python
彻底搞懂Python字符编码
2018/01/23 Python
对Python中range()函数和list的比较
2018/04/19 Python
Python实现简单查找最长子串功能示例
2019/02/26 Python
Python使用POP3和SMTP协议收发邮件的示例代码
2019/04/16 Python
Django模板导入母版继承和自定义返回Html片段过程解析
2019/09/18 Python
三步解决python PermissionError: [WinError 5]拒绝访问的情况
2020/04/22 Python
Python基于Hypothesis测试库生成测试数据
2020/04/29 Python
python实现无边框进度条的实例代码
2020/12/30 Python
FC-Moto瑞典:欧洲最大的摩托车服装和头盔商店之一
2018/11/27 全球购物
对象的序列化(serialization)类是面向流的,应如何将对象写入到随机存取文件中
2015/06/22 面试题
2013年保送生自荐信格式
2013/11/20 职场文书
敬老院活动总结
2014/04/28 职场文书
三八红旗手先进事迹材料
2014/05/13 职场文书
环保志愿者活动方案
2014/08/14 职场文书
夫妻房产协议书的格式
2014/10/11 职场文书
村党支部书记个人对照材料汇报
2014/10/26 职场文书
爱国电影观后感
2015/06/19 职场文书