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

    1.使用visibilitychange 浏览器标签页被隐藏或显示的时候会触发visibilitychange事件. document.addEventListener("visibilit ...

  2. C# Winform多窗体&&构造函数传值

    一.多窗体:三种打开窗体的状态: 最最基础的弹窗: //写在按钮的点击事件内: //实例需要弹出的窗口的类: Form2 f2 = new Form2(); f2.Show(); 1.弹窗窗口: // ...

  3. luogu2643 聪聪可可

    题目链接 题意 其实转化之后的题意就是求出树上有多少条路径长度是3的倍数.求答案的时候只要将这个数字除以总路径数量就行了. 思路 考虑点分治.对于当前子树,分别求出出树中每个点到根的路径长度对\(3\ ...

  4. Http请求报头设置

    1.添加一个SetHeaderValue方法: public static void SetHeaderValue(WebHeaderCollection header, string name, s ...

  5. pandas 读取excel文件对数据简单清洗并用matplotlib 将数据展示

    首先我们看下数据 接下来数据分析操作 import numpy as np import pandas as pd from matplotlib import pyplot as plt if __ ...

  6. 团体程序设计天梯赛(CCCC) L3014 周游世界 BFS证明

    团体程序设计天梯赛代码.体现代码技巧,比赛技巧.  https://github.com/congmingyige/cccc_code

  7. TestNg 8.参数化测试 - xml

    有的时候,case需要参数,那么,传餐怎么传? 我的目录结构:首先建一个包叫做parameter,然后在resource里面新建一个parameter.xml文件 看以下代码: ParameterTe ...

  8. Vector使用测试

    1.测试vector是否自动释放分配的空间 vector有大致两类申请空间的方式,一是vector(n,T()),一是vector(p,p+n)(p是自己申请的空间的指针). 其中第一种估计肯定会释放 ...

  9. pip的更新问题

    OSX系统中在利用pip安装有些模块的时候出现”you are using pip version 9.0.1, however version 10.0.0 is available. You sh ...

  10. 【清北学堂2018-刷题冲刺】Contest 3

     比较数学的一场,难度稍大. Task 1:数数 [问题描述]  fadbec 很善于数数,⽐如他会数将a 个红球,b 个黄球,c 个蓝球,d个绿球排成⼀列,求出任意相邻不同⾊的方案数⽬.  现在R ...