偶然间在浏览网页时，发现这样的效果。当鼠标不经意间滑过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. electron入门笔记（三）- 引入bootstrap

    源码:https://github.com/sueRimn/electron-bootstrap 当引入jQuery和bootstrap文件时,会报错,原因是:electron 的 Renderer ...

  2. 将pandas的Dataframe对象读写Excel文件

    Dataframe对象生成Excel文件 需要xlrd库  命令  pip install xlrd #导入pandas import pandas as pd import numpy as np ...

  3. numpy 多维数组及数组操作

    NumPy是Python语言的一个扩充程序库.支持高级大量的维度数组与矩阵运算,此外也针对数组运算提供大量的数学函数库.Numpy内部解除了Python的PIL(全局解释器锁),运算效率极好,是大量机 ...

  4. day02作业

    1.判断下列逻辑语句的True,False. 1),1 > 1 or 3 < 4 or 4 > 5 and 2 > 1 and 9 > 8 or 7 < 6 tru ...

  5. Hibernate 二（一级缓存，多表设计之一对多）

    1       对象状态与一级缓存 1.1   状态介绍 l  hibernate 规定三种状态:瞬时态.持久态.脱管态 l  状态 瞬时态:transient,session没有缓存对象,数据库也没 ...

  6. java eclipse 安卓环境配置

    adt下载地址   http://www.runoob.com/w3cnote/android-tutorial-eclipse-adt-sdk-app.html  我的云 安卓学习 java htt ...

  7. mongodb安装和运行

    转载来源:https://blog.csdn.net/IT_wanghe/article/details/53884229 参考教程:http://www.runoob.com/mongodb/mon ...

  8. Grunt安装与环境配置

    公司项目还没有前后端分离,而前端是使用node.js搭建起来的,现在需要自己动手开发,故学习下并做为记录防止以后忘记. grunt依赖node.js,所以在安装之前确保你安装了 Node.js.然后开 ...

  9. Servlet_问题总结

    1.Servlet转发到JSP后页面的CSS样式丢失,页面布局混乱,原来能点的链接现在失效 原因:原来前台页面(JSP|HTML)在引用静态资源(CSS|JS|JSP页面)时使用的是相对路径, 导致由 ...

  10. docker 基础 之安装

    一.安装 系统要求 Docker CE 支持 64 位版本 CentOS 7,并且要求内核版本不低于 3.10. CentOS 7 满足最低内核的要求,但由于内核版本比较低,部分功(如 overlay ...