jQuery tab菜单切换

最新推荐文章于 2021-09-15 17:36:57 发布

小黑脸dd

最新推荐文章于 2021-09-15 17:36:57 发布

阅读量200

点赞数 1

文章标签： jquery javascript css3 html5

本文链接：https://blog.youkuaiyun.com/DniNgL/article/details/107033380

版权

本文介绍了如何利用jQuery实现Tab菜单的切换效果。通过结合HTML、CSS3和JavaScript，创建了一个简洁而实用的Tab菜单。内容包括CSS样式定义、HTML结构布局以及jQuery脚本实现菜单的动态切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

运行效果如下图：
在这里插入图片描述
css部分：

 <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        ul {
            display: flex;
            flex-direction: column;
        }

        .container {
            width: 500px;
            margin: 100px;
            position: relative;
        }

        strong {
            margin: 45px;
            font-size: 20px;
        }

        .title {
            display: flex;
            align-items: center;
            width: 200px;
            background-color: #fff;
        }

        .title li {
            margin: 10px;
            flex: 1;
            cursor: pointer;
            user-select: none;
            height: 30px;
            line-height: 30px;
            color: #666;
            margin-bottom: 40px;
            border-bottom: 3px solid #fff;
        }

        .title li:hover {
            border-bottom: 3px solid #00A862;
            color: rgba(46, 44, 44, 0.87);
            font-weight: 700;
        }

        .title>li.active {
            color: rgb(180, 47, 47);
        }

        .content {
            position: absolute;
            top: 0;
            left: 250px;
            background: rgb(245, 245, 245);
            width: 800px;
            height: 400px;
        }

        .content li {
            display: none;
        }

        .content .list1 li:first-of-type .cicle {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593423846054&di=13dd8b649c97265faab6a8b8e3873c23&imgtype=0&src=http%3A%2F%2Fs.stylemode.com%2Fuploads%2Farticle%2F275x277%2F2015%2F06%2F20150604113955_98551.jpg)no-repeat;
            background-size: contain;
            display: inline-block;
            margin: 0 auto 6px;
        }

        .content .list1 li:nth-of-type(2) .cicle {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593424001739&di=8adfe1a247bca36ebefe642f24fb96fc&imgtype=0&src=http%3A%2F%2Fwww.dv37.com%2Fupload%2Feditor%2F201504%2F1429581062_172490.jpg)no-repeat;
            background-size: cover;
            display: inline-block;
            margin: 0 auto 6px;
        }

        .content .list1 li:nth-of-type(3) .cicle {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593424138086&di=4787a3477a8576ef0e901381d1f0d5da&imgtype=0&src=http%3A%2F%2Fimages.ofweek.com%2FUpload%2FNews%2F2017-01%2F06%2FSandy%2F1483665216229068565.png)no-repeat;
            background-size: cover;
            display: inline-block;
            margin: 0 auto 6px;
        }

        .list1 {
            display: flex;
        }

        .list1 li {
            text-align: center;
            display: flex;
            visibility: hidden;
            position: absolute;
            top: 10px;
            left: 20px;
        }

        .list1 li a {
            margin-right: 30px;
        }

        .list1 li.on {
            visibility: unset;
        }

        .list1 li a p {
            color: black;
            font-weight: 700px;
        }
    </style>

html部分：

 <div class="container">
        <strong>饮料</strong>
        <ul class="title">
            <li class="active">星巴克玩味冰调</li>
            <li>手工调制浓缩咖啡</li>
            <li>星冰乐®</li>
        </ul>
        <div class="content">
            <ul class="list1" style="display: block;">
                <li>
                    <a href="#">
                        <div class="cicle"></div>
                        <p>气炫冰山美式</p>
                    </a>
                    <a href="#">
                        <div class="cicle"></div>
                        <p>橙柚派对</p>
                    </a>
                    <a href="#">
                        <div class="cicle"></div>
                        <p>醋意桃桃</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="cicle"></div>
                        <p>橙柚派对</p>
                    </a>
                    <a href="#">
                        <div class="cicle"></div>
                        <p>橙柚派对</p>
                    </a>
                    <a href="#">
                        <div class="cicle"></div>
                        <p>橙柚派对</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="cicle"></div>
                        <p>摩卡可可碎片星冰乐</p>
                    </a>
                    <a href="#">
                        <div class="cicle"></div>
                        <p>摩卡可可碎片星冰乐</p>
                    </a>
                    <a href="#">
                        <div class="cicle"></div>
                        <p>摩卡可可碎片星冰乐</p>
                    </a>
                    <a href="#">
                        <div class="cicle"></div>
                        <p>摩卡可可碎片星冰乐</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>

js部分：

 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(function () {
            $(".title li").mouseenter(function () {
                $(this).addClass("active").siblings(".active").removeClass("active")
                $(".list1 li").eq($(this).index()).addClass("on").siblings(".on").removeClass(
                    "on")
            })
        })
    </script>