偶然间在浏览网页时，发现这样的效果。当鼠标不经意间滑过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. oh-my-zsh: bracketed-paste-magic:zle:47: not enough arguments for -U

    今天突然发现粘贴的时候就提示这个错误,通过查阅资料已经解决 解决方法 分析问题,是oh-my-zsh的bracketed-paste-magic功能出现了异常,并未找到更好的方法,暂时先禁用掉. 修改 ...

  2. netsh interface portproxy的一个简单例子

    netsh interface portproxy的微软帮助文档地址: https://technet.microsoft.com/zh-cn/library/cc776297(WS.10).aspx ...

  3. YSLOW（一款实用的网站性能检测工具）

     概述 YSlow是Yahoo发布的一款基于FireFox的插件,这个插件可以分析网站的页面,并告诉你为了提高网站性能,如何基于某些规则而进行优化.  安装  官网:http://yslow.org/ ...

  4. MySQL常用的一些函数

    内容太多,走链接: MySQL函数大全

  5. python在数据处理中常用的模块之numpy

    一 numpy模块 NumPy系统是Python的一种开源的数值计算扩展.这种工具可用来存储和处理大型矩阵,比Python自身的嵌套列表(nested list structure)结构要高效的多(该 ...

  6. eclipse+pyDev

    感觉python脚本语言在linux下挺有用的,想入门学习一下 新手入门个人习惯找个好点的IDE帮助完成工作,试了好多,如pycharm,sublime text自己打造 后来发现全扯淡,一点不符合自 ...

  7. bzoj 2002: [Hnoi2010]Bounce 弹飞绵羊（分块算法）

    传送门 题意: 中文题意,不再赘述. 题解: 下午在补分块算法的相关知识,看到某大神博客推荐的这道题目,就试着做了做: TLE了一下午可还行: 我的思路: 将这 n 个点分成 sqrt(n) 块: i ...

  8. angular cli全局版本大于本地版本 把本地版本升级方式

    查看 angular 版本  ng version 如出现提示 Your global Angular CLI version (xxx) is greater than your local ver ...

  9. C++ 文件保存

      文件保存: #include <sstream>#include <fstream>using namespace std; /*save to path ./record ...

  10. ruby-----render讲解

    Ruby rails页面跳转代码如下: 1.render(:text => string) 2.render(:inline => string, [:type => "r ...