tab选项卡在鼠标经过时实现切换延迟

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

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

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

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

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="js/jquery.1.11.3.min.js"></script><script>$(function() {                var t_li = $(".tab")                var c_li = $(".tab-content div")t_li.hover(function() {                    var i = t_li.index($(this));                    function way() {t_li.removeClass("cur").eq(i).addClass("cur");c_li.hide().eq(i).show();}timer = setTimeout(way, 500);}, function() {clearTimeout(timer);});});        </script><style>.head {width: 300px;height: 51px;border: 1px dashed #ccc;}.tab {width: 50%;float: left;line-height: 50px;cursor: pointer;}.cur {border-bottom: 2px solid red;}</style></head><body><div style="width: 300px;margin-left: 300px;" class="main"><div class="head"><div class="tab cur">tab1</div><div class="tab">tab2</div></div><div class="tab-content"><div>tab1的内容<br>tab1的内容<br>tab1的内容<br></div><div style="display: none;">tab2的内容<br>tab2的内容<br>tab2的内容<br></div></div></div></body></html>

转载于:https://blog.51cto.com/12883930/1923785

tab选项卡在鼠标经过时实现切换延迟相关推荐

基于jQuery实现tab选项卡【js实现页签切换】
任务描述本关任务:用jquery实现一个tab切换的功能. 效果图如下: 相关知识为了完成本关任务,你需要掌握:1.层次选择器,2.方法show和hide, 3.操作css类的方法. 层次选择器 ...
当鼠标移入时切换背景图时闪烁的问题
当页面第一次加载完成时,鼠标移入时需要切换的背景图还未被加载过,本地没有这张图片,所以切换的时候回出现闪烁的情况,我们可以在一个地方先把这张图放下,但是不让它显示出来,这样当我们第一次加载完页面时需要 ...
Tab选项卡切换效果JavaScript汇总
tab切换在现在的网页上,真是十分的常用呀.但是tab切换的JavaScript实现却有很多需要注意的地方,如何用最少的代码,最灵活的实现.这里收集了37个tab实现的JavaScript代码,在此备 ...
html如何实现选项卡切换思路,Tab选项卡切换完整思路及实现，值得珍藏
原标题:Tab选项卡切换完整思路及实现,值得珍藏这篇文章是从微信上转载过来的,原文作者是"Java实例解析",文章内容很棒,只是这个作者可能是一时看不到效果,所以没更新几篇就放弃 ...
iOS开发-iPad侧边栏Tab选项卡切换
Android中习惯了叫侧边栏,iOS中如果不习惯侧边栏称呼的话可以叫dock,侧边栏的切换,类似于Android中的底部导航栏的切换,iPad尺寸大了一些,导航的栏目放在侧边会显示的更好耐看一些.选 ...
【jQuery】前端项目实践案例1——使用jQuery制作Tab选项卡点击切换效果
1.实现效果: 案例描述:当用户单击不同的导航时,与其对应的内容回相应的呈现. 案例要求:使用jquery制作实现tab选项卡单击切换效果. 2.实现思路: (1)div+css布局,制作选项卡和对应 ...
tab选项卡转换html,前端开发tab选项卡切换各种解决方案
前端开发软件ide| tab切换,做前端的各位大神再熟悉不过,因为运用的场合太多,所以大家可能都不屑于去关心了.不晓得大家遇到这种时是自己马上梳理逻辑写一次呢,还是用已有的模板或自己的库,今天我对自己 ...
微信小程序Tab选项卡切换大集合
代码地址如下: http://www.demodashi.com/demo/14028.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
不能随意切换的Tab选项卡页面
不能随意切换的Tab选项卡页面 ------------------------------------- 开发工具与关键技术:Visual Studio 2015 C# 作者:林敏静撰写时间:20 ...

tab选项卡在鼠标经过时实现切换延迟

tab选项卡在鼠标经过时实现切换延迟相关推荐

最新文章

热门文章