Tab选项卡 延迟切换效果js实现

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

 

posted @ 2017-09-05 20:33  1点  阅读(425)  评论(0)  编辑  收藏  举报