偶然间在浏览网页时，发现这样的效果。当鼠标不经意间滑过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>

tab选项卡在鼠标经过时实现切换延迟的更多相关文章

  1. Axure实现Tab选项卡切换功能

    这几天用Axure画原型图的过程中,须要实现Tab选项卡切换的效果,但Axure中并没有类似于Tab控件的部件,所以能够用Axure中的动态面板(Dynamic Panel)来实现. 本文以已经汉化的 ...

  2. 【Little Demo】左右按钮tab选项卡双切换

    通过前一篇文章 从简单的Tab标签到Tab图片切换 的说明,相关效果也就可以实现了. 1.左右按钮tab选项卡双切换 很明显,左右两个按钮是 absolute 布局,另外就是内容部分和Tab标签部分. ...

  3. iOS开发-iPad侧边栏Tab选项卡切换

    Android中习惯了叫侧边栏,iOS中如果不习惯侧边栏称呼的话可以叫dock,侧边栏的切换,类似于Android中的底部导航栏的切换,iPad尺寸大了一些,导航的栏目放在侧边会显示的更好耐看一些.选 ...

  4. jQuery实现TAB选项卡切换特效简单演示

    本文实例为大家分享jQuery实现TAB选项卡切换特效,供大家参考,具体内容如下 1.tab切换 on ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1 ...

  5. react tab选项卡切换

    Tab选项卡切换是个很常见也很简单的小功能,用原生js和jq去写的话可能不到20行代码就搞定so easy.但是用react去实现就没那么容易了(是自己react比较菜).由于最近在重新学习react ...

  6. 纯CSS实现tab选项卡切换

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta cont ...

  7. 下拉菜单效果和tab选项卡切换

    //下拉菜单效果和tab选项卡切换. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  8. easyui之自定义字体图标（鼠标覆盖时切换颜色）

    项目要求是自定义字体图标,使用easyui框架结构,众所周知easyui强功能弱样式,字体图标其实就是一张图片.要达到切换图标颜色的效果,要么就是有两套图,使用js控制.但是我这个人比较懒,不喜欢做复 ...

  9. 基于HTML5 Tab选项卡动画切换特效

    基于HTML5 Tab选项卡动画切换特效.这是一款基于HTML5+CSS3实现的带有动画切换效果的Tab选项卡插件cbpFWTabs.效果图如下: 在线预览   源码下载 实现的代码. html代码: ...

随机推荐

  1. Linux下无法运行Color picker

    ➜ ~ com.github.ronnydo.colorpicker com.github.ronnydo.colorpicker: error while loading shared librar ...

  2. A1133. Splitting A Linked List

    Given a singly linked list, you are supposed to rearrange its elements so that all the negative valu ...

  3. IntelliJ IDEA配置maven远程仓库

    最近在搭建springMVC+mybatis的框架,在添加jar包的时候出问题了.以前都是直接将jar包放到lib里面即可,但是看到现在用maven的比较多,就去配置maven.然后发现,在添加某个版 ...

  4. 某些浏览器具有dns缓存功能，大家更改域名指向，建议清理下浏览器缓存

    最近遇到一个很郁闷的问题,在我们的的ngnix服务器上原来默认的网址需要更改.更改后,重启了ngnix.可是在客户端使用360浏览器打开网址.地址还是指向旧地址.直接输入服务器 IP地址转向了新地址, ...

  5. Luogu P3521 [POI2011]ROT-Tree Rotations

    题目链接 \(Click\) \(Here\) 线段树合并,没想到学起来意外的很简单,一般合并权值线段树. 建树方法和主席树一致,即动态开点.合并方法类似于\(FHQ\)的合并,就是把两棵树的信息整合 ...

  6. Go语言反射规则

    Go语言反射规则 - The Laws of Reflection 转:http://my.oschina.net/qbit/blog/213720 原文地址:http://blog.golang.o ...

  7. day12-(jsp&el&jstl)

    回顾: jsp: cookie: 浏览器端会话技术 由服务器产生,生成key=value形式,通过响应头(set-cookie)返回给浏览器,保存在浏览器端 下次访问的时候根据一定的规则携带cooki ...

  8. Storm常用的类

    BaseRichSpout (消息生产者)BaseBasicBolt (消息处理者)TopologyBuilder (拓扑的构建器)Values (将数据存放到values ,发送到下个组件)Tupl ...

  9. sklearn-woe/iv-乳腺癌分类器实战

    sklearn实战-乳腺癌细胞数据挖掘 https://study.163.com/course/introduction.htm?courseId=1005269003&utm_campai ...

  10. 体验Hadoop3.0生态圈-CDH6.1时代的来临

    体验Hadoop3.0生态圈-CDH6.1时代的来临 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 我在公司使用的是CDH5.15.1这个发行版本,具体的部署文档之前也有给大家分享 ...