jQuery特效Tab切换栏选项卡demo

约定不等于承诺〃 2022-11-10 14:19 244阅读 0赞

在建站过程中，有时候需要有效利用页面空间，需要将多个模块的链接、图片、视频等网站资源放在一个div中，实现点击或者滑动实现展示多个模块，多用在侧边栏展示网站最新更新、最热文章，或者是展示顶级频道页面下的多个栏目的内容，其实CSS也可实现这样的效果，但是还是没有jQuery实现起来方便，以下是今天学习jQuery写的一个jQuery实现tab切换栏特效，实现多个模块点击切换的Demo.

Html和jQuery代码：

<!doctype html>
    <html lang="ch-ZN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Tab切换栏选项卡jQuery特效</title>
        <link rel="stylesheet" href="tab.css">
        <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    </head>
    <body>
    <main class="main">
        <div class="recommend-article  container">
            <ul class="navTab">
                <li class="active">最新文章</li>
                <li>热门文章</li>
                <li>热门点击</li>
            </ul>
            <div class="article-item">
                <ul>
                    <li><a href="#">简单实现jQuery鼠标经过切换图片特效简单实现jQuery鼠标经过切换图片特效</a></li>
                    <li><a href="#">简单实现jQuery鼠标经过切换图片特效</a></li>
                    <li><a href="#">简单实现jQuery鼠标经过切换图片特效</a></li>
                    <li><a href="#">简单实现jQuery鼠标经过切换图片特效</a></li>
                    <li><a href="#">简单实现jQuery鼠标经过切换图片特效</a></li>
                    <li><a href="#">简单实现jQuery鼠标经过切换图片特效</a></li>
                    <li><a href="#">简单实现jQuery鼠标经过切换图片特效</a></li>
                    <li><a href="#">简单实现jQuery鼠标经过切换图片特效</a></li>
                    <li><a href="#">简单实现jQuery鼠标经过切换图片特效</a></li>
                    <li><a href="#">简单实现jQuery鼠标经过切换图片特效</a></li>
                </ul>
                <ul>
                    <li><a href="#">利用jQuery制作的导航下拉菜单效果</a></li>
                    <li><a href="#">利用jQuery制作的导航下拉菜单效果</a></li>
                    <li><a href="#">利用jQuery制作的导航下拉菜单效果</a></li>
                    <li><a href="#">利用jQuery制作的导航下拉菜单效果</a></li>
                    <li><a href="#">利用jQuery制作的导航下拉菜单效果</a></li>
                    <li><a href="#">利用jQuery制作的导航下拉菜单效果</a></li>
                    <li><a href="#">利用jQuery制作的导航下拉菜单效果</a></li>
                    <li><a href="#">利用jQuery制作的导航下拉菜单效果</a></li>
                    <li><a href="#">利用jQuery制作的导航下拉菜单效果</a></li>
                    <li><a href="#">利用jQuery制作的导航下拉菜单效果</a></li>
                </ul>
                <ul>
                    <li><a href="#">用PHP中的for循环写的乘法口诀运算表</a></li>
                    <li><a href="#">用PHP中的for循环写的乘法口诀运算表</a></li>
                    <li><a href="#">用PHP中的for循环写的乘法口诀运算表</a></li>
                    <li><a href="#">用PHP中的for循环写的乘法口诀运算表</a></li>
                    <li><a href="#">用PHP中的for循环写的乘法口诀运算表</a></li>
                    <li><a href="#">用PHP中的for循环写的乘法口诀运算表</a></li>
                    <li><a href="#">用PHP中的for循环写的乘法口诀运算表</a></li>
                    <li><a href="#">用PHP中的for循环写的乘法口诀运算表</a></li>
                    <li><a href="#">用PHP中的for循环写的乘法口诀运算表</a></li>
                    <li><a href="#">用PHP中的for循环写的乘法口诀运算表</a></li>
                </ul>
            </div>
        </div>
    </main>
    <script>
        $(function () {
            $(".navTab li").click(function () {
                $(this).addClass("active").siblings().removeClass("active");
                var index =$(this).index();
                $(".article-item ul").eq(index).show().siblings().hide();
            })
        })
    </script>
    </body>
    </html>

css部分代码：

*{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body{
        font-family: "Microsoft YaHei UI Light";
        font-size: 14px;
        color: #666;
    }
    body ul li{
        list-style: none;
    }
    body a{
        color: #333;
        text-decoration: none;
    }
    body a:hover{
        color: #F06868;
    }
    .main{
        margin-top: 20px;
    }
    .container{
        width: 360px;
        margin:0 auto;
    }
    .recommend-article {
        padding: 15px;
        background-color:#ddd;
    }
    .recommend-article .navTab{
        margin: 10px 0;
        font-size: 16px;
        font-weight: 600;
        border-bottom: 1px solid #fff;
    }
    .recommend-article .navTab li{
        display:inline-block;
        padding: 5px;
        border: 1px solid #f5f5f5;
        border-bottom: none;
        background-color: #fff;
        border-radius: 10px 10px 0 0;
    }
    .recommend-article .navTab li.active{
        background-color:#df5000;
        color: white;
    }
    .recommend-article .article-item{
        max-height: 257px;
        padding: 10px;
        line-height: 24px;
        overflow: hidden;
        border: 1px solid #fff;
    }
    .recommend-article .article-item ul li{
        counter-increment: number;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .recommend-article .article-item ul li::before{
        display: inline-block;
        width: 16px;
        height: 16px;
        margin-right: 5px;
        font-weight: 600;
        text-align: center;
        content: counter(number);
    }
    .recommend-article .article-item ul li:nth-child(1)::before{
        color: rgba(255,0,0,.8);
    }
    .recommend-article .article-item ul li:nth-child(2)::before{
        color: rgba(255,0,0,.6);
    }
    .recommend-article .article-item ul li:nth-child(3)::before{
        color: rgba(255,0,0,.4);
    }

Css部分中需要对放置内容的容器盒子设定高度(article-item)，否则刷新页面时会在第一个模块中显示所有模块的内容。

效果图：

![jQuery特效Tab切换栏选项卡demo效果图][jQuery_Tab_demo] 标题

[jQuery_Tab_demo]: /images/20221022/d9e8a7eea4d14b79adb65e907d7f99b8.png