一个页面tab标签切换,都有scroll事件的解决办法
当前页有多个tab,如果都有scroll事件, 先解绑$(window).off('scroll') 再执行scroll就不可以了,多个标签就不会互相干扰;
给你们个例子:
//标签切换
$('.tab>a').on('click',function(){
$(this).addClass('Cur').siblings().removeClass('Cur');
$('.Content>div').eq($(this).index()).show().siblings().hide();
$(window).off('scroll'); //先解绑滚动事件,避免tab切换冲突
//标签1
if($(this).index()=="0"){
Load1(); //标签一执行的函数
}
//标签2
if($(this).index()=="1"){
Load2(); //标签二执行的函数
};
//标签3
if($(this).index()=="2"){
Load3(); //标签三执行的函数
};
});
没有深入研究更简单的写法,大家凑合着看,这都是我写东西遇到的问题,觉得当时比较费劲的,可能你们觉得没啥,so easy~~~ 万一有和我遇到同样问题的呢 ,也算是可参考
助人为乐,手留余香 哈哈~~~
一个页面tab标签切换,都有scroll事件的解决办法的更多相关文章
- Android ScrollView 嵌套 ListView、 ListView 嵌套ScrollView Scroll事件冲突解决办法
本人菜鸟一名,最近工作了,开始学习Android. 最近在做项目的时候,UX给了个design,大概就是下拉刷新的ListView中嵌套了ScrollView,而且还要在ScrollView中添加动画 ...
- JS特效之Tab标签切换
在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了JS后,开始要写出一些简单的特效.今天我也分享一个简单tab标签切换的例子.先附上代码: HT ...
- 每天一个JavaScript实例-tab标签切换
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- JS 实现 Tab标签切换功能
Tab标签切换 效果图: HTML部分: <div class="wrap"> <ul id="tag"> < ...
- Bootstrap——设置Tab标签切换
最近一个小项目需要用Tab标签切换显示不同div内容,用到了Bootstrap里面的东西,但是在Bootstrap3教程里却没有找到对应的代码,这里记录一下,方便以后快速查阅学习. 代码如下: < ...
- 网站开发,推荐使用SuperSlide 插件-Tab标签切换,图片滚动,无缝滚动,焦点图
SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新.网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解 ...
- jQuery蓝色修边tab标签切换
jQuery蓝色修边tab标签切换,jQuery,tab选项卡,标签切换,jQuery蓝色修边tab标签广告代码切换是一款非常简单实用tab选项卡切换效果,自己定义好相关的html标签即可,选项卡切换 ...
- javascript--获取一个页面各个标签的数量
获取一个页面各个标签的数量 document.getElementsByTagName('*')--获取所有的标签. var obj = document.getElementsByTagName(' ...
- Vue指令:v-for的用法;v-bind绑定class的几种写法;tab标签切换
一.v-for 的用法 循环指令,可以遍历 Number.String.Object.Array: 循环数字.字符串:有2个参数,分别是value和索引值: 循环对象:有3个参数,分别是 属性值.属性 ...
随机推荐
- 张高兴的 Windows 10 IoT 开发笔记:HC-SR04 超声波测距模块
HC-SR04 采用 IO 触发测距.下面介绍一下其在 Windows 10 IoT Core 环境下的用法. 项目运行在 Raspberry Pi 2/3 上,使用 C# 进行编码. 1. 准备 H ...
- 基于Eclipse IDE的Ardupilot飞控源码阅读环境搭建
基于Eclipse IDE的Ardupilot飞控源码阅读环境搭建 作者:Awesome 日期:2017-10-21 需准备的软件工具 Ardupilot飞控源码 PX4 toolchain JAVA ...
- Linux入门(12)——解决双系统下Ubuntu16.04不能访问Windows分区
解决办法一: 进入windows系统,关闭快速启动,关机. 解决办法二: 如果办法一不能解决问题,用这个办法. 查看盘符: sudo fdisk -l 需要在查看盘符后记下目标盘符的数字,比如想解除C ...
- 多平台Native库打入JAR包发布实战
1.前言 在开发Java应用的过程中,经常会遇到需要使用C/C++等Native语言编译的动态库或静态库,在这些情况下往往需要将预先编译好的各平台库文件与JAR包一同发布,鉴于简洁的原则,我们可能会希 ...
- Java规范推荐
Java规范推荐 推荐:http://blog.csdn.net/tristansmile/article/details/7989670 命名规范 项目名:全部小写 Package 的命名:应该都是 ...
- Ubuntu16.04卸载opencv2.4.9并安装opencv3.2.0+contrib
本文为作者原创,转载请注明出处(http://www.cnblogs.com/mar-q/)by 负赑屃 需要用到opencv中的surf和sift算法,机器上只有opencv3.2,没有扩展包,于是 ...
- tarjan求强连通分量+缩点+割点以及一些证明
“tarjan陪伴强联通分量 生成树完成后思路才闪光 欧拉跑过的七桥古塘 让你 心驰神往”----<膜你抄> 自从听完这首歌,我就对tarjan开始心驰神往了,不过由于之前水平不足,一 ...
- Life is a Line
Life is a Line Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/65536 K (Java/Others) Tot ...
- windows 上rsync客户端使用方法
1.1 获取 windows上实现rsync的软件(cwRsync) cwRsync是Windows 客户端GUI的一个包含Rsync的包装.您可以使用cwRsync快速远程文件备份和同步. 1.1. ...
- server-sent-event使用流信息向客户端发送数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...