try.html

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <link rel="stylesheet" type="text/css" href="try.css">

    <script type="text/javascript" src="try.js"></script>

</head>

<body>

<div id="notice" class="notice">

    <div class="notice-tit" id="notice-tit">

        <ul>

            <li><a href="#">公告</a></li>

            <li><a href="#">规则</a></li>

            <li><a href="#">论坛</a></li>

            <li><a href="#">安全</a></li>

            <li class="select"><a href="#">公益</a></li>

        </ul>

    </div>

    <div id="notice-con" class="notice-con">

        <div class="mod" style="display: none;">

            <ul>

                <li><a href="#">张勇：玩快乐足球</a></li>

                <li><a href="#">张勇：玩快乐足球</a></li>

                <li><a href="#">张勇：玩快乐足球</a></li>

                <li><a href="#">张勇：玩快乐足球</a></li>

            </ul>

        </div>

        <div class="mod" style="display: none;">

            <ul>

                <li><span>[<a href="#">通知</a>]</span><a href="#">张勇：要玩快乐足球</a></li>

                <li><span>[<a href="#">通知</a>]</span><a href="#">张勇：要玩快乐足球</a></li>

                <li><span>[<a href="#">通知</a>]</span><a href="#">张勇：要玩快乐足球</a></li>

                <li><span>[<a href="#">通知</a>]</span><a href="#">张勇：要玩快乐足球</a></li>

            </ul>

        </div>

        <div class="mod" style="display: none;">

            <ul>

                <li><span>[<a href="#">通知</a>]</span><a href="#">张勇：玩快乐足球</a></li>

                <li><span>[<a href="#">通知</a>]</span><a href="#">张勇：玩快乐足球</a></li>

                <li><span>[<a href="#">通知</a>]</span><a href="#">张勇：玩快乐足球</a></li>

                <li><span>[<a href="#">通知</a>]</span><a href="#">张勇：玩快乐足球</a></li>

            </ul>

        </div>

        <div class="mod" style="display: none;">

            <ul>

                <li><a href="#">张勇：要玩快乐</a></li>

                <li><a href="#">张勇：要玩快乐足球</a></li>

                <li><a href="#">张勇：要玩快乐足球</a></li>

                <li><a href="#">张勇：要玩快乐足球</a></li>

            </ul>

        </div>

        <div class="mod" style="display: block;">

            <ul>

                <li><a href="#">张勇：要玩快乐</a></li>

                <li><a href="#">张勇：要玩快乐足球</a></li>

                <li><a href="#">张勇：要玩快乐足球</a></li>

                <li><a href="#">张勇：要玩快乐</a></li>

            </ul>

        </div>

    </div>

</div>

</body>

</html>

　try.css　

*{

    margin: 0;

    padding:0;

    list-style: none;

    font-size: 12px;

}

.notice{

    width: 298px;

    height: 98px;

    margin: 10px;

    border: 1px solid #eee;

    overflow: hidden;

}

.notice-tit{

    height: 27px;

    position: relative;

    background-color: #f7f7f7;

}

.notice-tit ul{

    position: absolute;

    width: 301px;

    left: -1px;

}

.notice-tit ul li{

    float: left;

    width: 58px;

    height: 26px;

    text-align: center;

    line-height: 26px;

    overflow: hidden;

    padding: 0 1px;

    background: #f7f7f7;

    border-bottom: 1px solid #eee;

}

.notice-tit ul li.select{

    background: #fff;

    border-bottom-color: #fff;

    border-left: 1px solid #eee;

    border-right: 1px solid #eee;

    padding: 0;

    font-weight: bolder;

}

.notice li a:link,.notice-tit li a:visited{

    text-decoration: none;

    color: #000;

}

.notice li a:hover{

    color: #f90;

}

.notice-con .mod{

    margin: 10px 10px 10px 19px;

}

.notice-con .mod ul li{

    float: left;

    width: 134px;

    height: 25px;

    overflow: hidden;

}

　　try.js

function $(id){

    return typeof id==='string'?document.getElementById(id):id;

}

window.onload = function()

{

    var index=0;

    var timer=null;

    //获取鼠标滑过或点击的标签和要切换内容的元素

    var titles = $('notice-tit').getElementsByTagName('li');

    var divs  =$('notice-con').getElementsByTagName('div');

    // alert(divs.length);

    if(titles.length!=divs.length)

        return;

    for(var i=0;i<titles.length;i++){

        titles[i].id=i;

        titles[i].onmouseover=function(){

            // 用that这个变量来引用当前滑过的li

            var that=this;

            // 如果存在准备执行的定时器，立刻清除，只有当前停留时间大于500ms时才开始执行

            if(timer){

                clearTimeout(timer);

                timer=null;

            }

            // 延迟半秒执行

            timer=window.setTimeout(function(){

                for(var j=0;j<titles.length;j++){

                    titles[j].className='';

                    divs[j].style.display='none';

                }

                titles[that.id].className='select';

                divs[that.id].style.display='block';

            },500);

        }

    }

}

　　效果：

2017-09-05  20:32:11

Tab选项卡 延迟切换效果js实现的更多相关文章

  1. Tab选项卡 自动切换效果js实现

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

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

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

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

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

  4. 旋转木马幻灯片切换效果JS源码详解

    首先,放上慕课网的课程链接,源码是在这个课程里分享出来的,https://www.imooc.com/learn/386. 文章适合学习过这个课程的同学,再看这篇文章,可能有更深入的理解.主要是对各种 ...

  5. 无JavaScript实现选项卡轮转切换效果

    CSS:   .box{width:200px; height:100px; border:1px solid #ddd; overflow:hidden;}.list{width:200px; he ...

  6. CSS 制作 圆角TAB选项卡下拉效果(顺便学习CSS伪元素

    CSS伪元素: 伪元素如果没有设置“content”属性,伪元素是无用的. 使用伪元素插入的内容在页面的源码里是不可见的,只能在css里可见 插入的元素在默认情况下是内联元素(或者,在html5中,在 ...

  7. 手机端的tab切换，响应式切换效果

    之前写过这些tab切换的效果,无论网页上还是手机端,网上也有很多的例子,这个好像是我参考网上,也不知道是哪里的了.总结了一下,就当保存下来了把. <!DOCTYPE html > < ...

  8. [Jquery]tab页面切换效果

    思路:取得头部和内容的div,头部当前点击的高亮,其余的去除高亮,并通过index()方法获得当前点击的索引,然后内容div通过.eq(index)显示和隐藏 优化:当前做法,从第一个快速移到最后一个 ...

  9. weui 多网页切换效果分析

    weui的文档写的不怎么详尽,简单的来讲WeUI 为微信 Web 服务量身设计的h5框架. WeUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户 ...

随机推荐

  1. OC + RAC (五) RACMulticastConnection

    -(void)_test5{ //弊端:有几个订阅者就会请求几次数据 // 1.创建信号 RACSignal *signal = [RACSignal createSignal:^RACDisposa ...

  2. BZOJ 4180: 字符串计数 后缀自动机 + 矩阵乘法 + 二分（神题）

    Description SD有一名神犇叫做Oxer,他觉得字符串的题目都太水了,于是便出了一道题来虐蒟蒻yts1999.   他给出了一个字符串T,字符串T中有且仅有4种字符 'A', 'B', 'C ...

  3. Android中对Apk加固(加壳)续篇之---对Native层(so文件)进行加固

    有人说Android程序用Java代码写的,再怎么弄都是不安全的,很容易破解的,现在晚上关于应用加固的技术也很多了,当然这些也可以用于商业发展的,梆梆加密和爱加密就是很好的例子,当然这两家加固的Apk ...

  4. Django 基础笔记补充

    1.目录文件 django-admin.py startproject mydj cd mydj python manage.py startapp myapp   后生成目录: mydj/ ├── ...

  5. [CSP-S模拟测试]:回文（hash+二维前缀和）

    题目描述 闲着无聊的$YGH$秒掉上面两道题之后,开始思考有趣的回文串问题了. 他面前就有一个漂浮着的字符串.显然$YGH$是会$manacher$的,于是他随手求出了这个字符串的回文子串个数.但是他 ...

  6. Java网络编程与NIO详解2：JAVA NIO 一步步构建IO多路复用的请求模型

    本文转载自:https://github.com/jasonGeng88/blog 本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查看 http ...

  7. sql常用 语句总结

    一,插入一个新字段:ALTER TABLE +表名+ADD  COLUMN(字段名+ 类型) sql1 = 'ALTER TABLE klkl_4s_shop ADD COLUMN (name_rea ...

  8. Windows 10 Shell命令

    可以在[win+R] run 窗口 和 explorer窗口中使用 在command prompt中使用: C:\Users\a>explorer shell:sendto “ shell:Ac ...

  9. android7.0后对于file://的限制

    错误信息: 04-18 14:56:58.283  4440  4440 W System.err: android.os.FileUriExposedException: file:///stora ...

  10. 文件上传： FileItem类、ServletFileUpload 类、DiskFileItemFactory类

    文件上传: ServletFileUpload负责处理上传的文件数据,并将表单中每个输入项封装成一个FileItem对象中, 在使用ServletFileUpload对象解析请求时需要根据DiskFi ...