偶然间在浏览网页时，发现这样的效果。当鼠标不经意间滑过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. js 获取随机数 Math.random()

    js 获取随机数 Math.random() // 结果为0-1间的一个随机数(包括0,不包括1) var randomNum1 = Math.random(); //console.log(rand ...

  2. Jupyter Notebook添加Ruby支持

    安装步骤 gem install iruby iruby register --force 参考资料:http://devopspy.com/linux/ruby-kernel-jupyter-not ...

  3. Linux基本命令总结（三）

    接上篇: 11,more命令,功能类似 cat ,cat命令是整个文件的内容从上到下显示在屏幕上. more会以一页一页的显示方便使用者逐页阅读,而最基本的指令就是按空白键(space)就往下一页显示 ...

  4. 基于Senparc.CO2NET 缓存策略扩展的缓存使用方法

    没啥说的,直接上代码 1.缓存  CacheFactory 实现: //---------------------------------------------------------------- ...

  5. Could not install the app on the device, read the error above for details. Make sure you have an Android emulator running or a device connected and have set up your Android development environment:

    Administrator@DESKTOP-EHCTIOR MINGW64 /d/react-native-eyepetizer (master) $ react-native run-android ...

  6. 外显子分析思路总结（Exome Sequencing Analysis review）

    趁着周末,大好的日子,总结了一下外显子分析的思路(套路)

  7. 数据库连接池 C3p0

    数据库连接池 C3po 1 定义 本质上是个容器(集合) 存放数据库的连接容器(connection 对象) ,当系统初始化以后 容器就会创建 容器中就会申请一些连接对象 ,当用户来访问数据库的时候 ...

  8. ansible的主机的默认配置部分

    Ansible默认安装好后有一个配置文件/etc/ansible/ansible.cfg,该配置文件中定义了ansible的主机的默认配置部分,如默认是否需要输入密码.是否开启sudo认证.actio ...

  9. 黑苹果是否会成为mac电脑的竞争对手？

    最近黑科技技术大佬们都在传扬windows系统上安装mac系统,不用买mac电脑也可以使用mac一样的操作环境.什么是黑苹果?一起来看看如何在windows系统上安装mac系统. 更多专题,可关注小编 ...

  10. Vue之vue-cli安装与简单调试

    一.安装nodejs https://nodejs.org/en/download/ nodejs简单使用 node -v 查看版本 npm -v 查看对应npm版本 如果npm版本太低小于 4.0 ...