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 相关文章推荐
jquery 插件学习(二)
Aug 06 Javascript
JS中把字符转成ASCII值的函数示例代码
Nov 21 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
Jan 02 Javascript
使用JS取得焦点(focus)元素代码
Mar 22 Javascript
浅谈javascript对象模型和function对象
Dec 26 Javascript
8个超实用的jQuery功能代码分享
Jan 08 Javascript
jquery获取及设置outerhtml的方法
Mar 09 Javascript
angularjs客户端实现压缩图片文件并上传实例
Jul 06 Javascript
jquery采用oop模式class类的使用示例
Jan 22 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
Sep 23 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
Oct 11 Javascript
浅谈Ant Design Pro 菜单自定义 icon
Nov 17 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伪静态页面函数附使用方法
2008/06/20 PHP
PHP操作文件类的函数代码(文件和文件夹创建,复制,移动和删除)
2011/11/10 PHP
php可应用于面包屑导航的递归寻找家谱树实现方法
2015/02/02 PHP
php基于单例模式封装mysql类完整实例
2016/10/18 PHP
php二维数组按某个键值排序的实例讲解
2019/02/15 PHP
Javascript - HTML的request类
2007/01/09 Javascript
js中判断控件是否存在
2010/08/25 Javascript
js 图片随机不定向浮动的实现代码
2013/07/02 Javascript
用js实现in_array的方法
2013/11/05 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
2013/11/27 Javascript
javascript获取鼠标点击元素对象(示例代码)
2013/12/20 Javascript
a标签的href与onclick事件的区别详解
2014/11/12 Javascript
百度地图API之本地搜索与范围搜索
2015/07/30 Javascript
javascript实现列表滚动的方法
2015/07/30 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
2016/07/22 Javascript
javascript验证内容为数字以及长度为10的简单实例
2016/08/20 Javascript
JS 实现随机验证码功能
2017/02/15 Javascript
js实现动态添加上传文件页面
2018/10/22 Javascript
[00:23]魔方之谜解锁款式
2018/12/20 DOTA
Python程序设计入门(1)基本语法简介
2014/06/13 Python
深入理解Python中的内置常量
2017/05/20 Python
CentOS 7下Python 2.7升级至Python3.6.1的实战教程
2017/07/06 Python
python在ubuntu中的几种安装方法(小结)
2017/12/08 Python
python实现冒泡排序算法的两种方法
2018/03/10 Python
python 定时器,轮询定时器的实例
2019/02/20 Python
python使用matplotlib画柱状图、散点图
2019/03/18 Python
使用OpCode绕过Python沙箱的方法详解
2019/09/03 Python
浅谈Python 钉钉报警必备知识系统讲解
2020/08/17 Python
ESDlife健康生活易:身体检查预订、搜寻及比较
2019/05/10 全球购物
Parfumdreams芬兰:购买香水和化妆品
2021/02/13 全球购物
生产部主管岗位职责
2014/01/06 职场文书
运动会广播稿100字
2014/01/11 职场文书
承诺书格式范文
2014/06/03 职场文书
秦兵马俑导游词
2015/02/02 职场文书
公司年夜饭通知
2015/04/25 职场文书
2015毕业设计工作总结
2015/07/24 职场文书