Tab选项卡点击滑动效果js实现

Posted 2020-10-05 1点

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Tab选项卡点击滑动效果js实现相关的知识，希望对你有一定的参考价值。

html部分代码：

[html]

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
    <title></title>  
    <link rel="stylesheet" type="text/css" href="css/style.css">  
    <script type="text/javascript" src="js/script.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>

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: 25;
    overflow: hidden;
}

js部分代码：

function $(id){
    return typeof id===‘string‘?document.getElementById(id):id;
}
window.onload = function()
{
    //获取鼠标滑过或点击的标签和要切换内容的元素
    var titles = $(‘notice-tit‘).getElementsByTagName(‘li‘);
    var divs  =$(‘notice-con‘).getElementsByTagName(‘div‘);
    // alert(divs.length);
    if(titles.length!=divs.length)
        return;

    //遍历titles下的所有li
    for(var i=0;i<titles.length;i++)
    {
        titles[i].id = i;
        titles[i].onmouseover = function(){
            for(var j=0;j<titles.length;j++)
            {
                //清除所有li上的class
                titles[j].className=‘‘;
                divs[j].style.display = ‘none‘;
            }
            //设置当前为高亮显示
            this.className = ‘select‘;
            divs[this.id].style.display = ‘block‘;

        }


    }
}

效果演示：

技术分享

以上是关于Tab选项卡点击滑动效果js实现的主要内容，如果未能解决你的问题，请参考以下文章

选项卡执行android中下一个片段中存在的代码

mui中选项卡切换中怎么禁止页面左右滑动

有人知道这个tab页签滑动切换怎么写代码么？

tab选项卡动态滑动效果

Js效果：图片轮播；选项卡；侧面菜单下拉效果;进度条效果；滑动效果；好友列表选中效果；点击选中显示效果

jQuery垂直切换相册图片js动画效果

Tab选项卡点击 滑动效果js实现

Tab选项卡点击滑动效果js实现