博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
tab选项卡在鼠标经过时实现切换延迟
阅读量:5121 次
发布时间:2019-06-13

本文共 903 字,大约阅读时间需要 3 分钟。

  偶然间在浏览网页时,发现这样的效果。当鼠标不经意间滑过tab时并不会切换,当鼠标停留在上面一段时候后才会切换。

  个人觉得用户体验不错,优点是1.当用户只是滑过标签,并不需要切换,而此时如果切换标签需要请求数据时,会避免不必要的异步请求;2.避免页面在用户不需要的时候切换跳动,影响用户体验。

  网上查阅了几个方法,发现下面的方法更简洁有效。整理下来,供以后参考。

  其中的重点是那段js代码:原理是,通过hover的时候设置定时器,延迟执行切换方法,离开时,清楚计时器。当hover的时间小于延迟时间时,会清楚计时器,不会执行切换方法。仅当停留时间大于延迟时间才会切换。这样能有效避免滑过tab触发切换事件。

            
tab1
tab2
tab1的内容
tab1的内容
tab1的内容
tab2的内容
tab2的内容
tab2的内容

 

posted on
2017-05-09 16:54  阅读(
...) 评论(
...) 收藏

转载于:https://www.cnblogs.com/zhaodahai/p/6831413.html

你可能感兴趣的文章
在NT中直接访问物理内存
查看>>
SIP服务器性能测试工具SIPp使用指导(转)
查看>>
回调没用,加上iframe提交表单
查看>>
(安卓)一般安卓开始界面 Loding 跳转 实例 ---亲测!
查看>>
LeetCode(3) || Median of Two Sorted Arrays
查看>>
大话文本检测经典模型:EAST
查看>>
待整理
查看>>
一次动态sql查询订单数据的设计
查看>>
C# 类(10) 抽象类.
查看>>
Vue_(组件通讯)子组件向父组件传值
查看>>
jvm参数
查看>>
我对前端MVC的理解
查看>>
Silverlight实用窍门系列:19.Silverlight调用webservice上传多个文件【附带源码实例】...
查看>>
2016.3.31考试心得
查看>>
mmap和MappedByteBuffer
查看>>
转-求解最大连续子数组的算法
查看>>
对数器的使用
查看>>
【ASP.NET】演绎GridView基本操作事件
查看>>
ubuntu无法解析主机错误与解决的方法
查看>>
尚学堂Java面试题整理
查看>>