jQuery tab菜单切换

运行效果如下图:
在这里插入图片描述
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>
展开阅读全文

Windows版YOLOv4目标检测实战:训练自己的数据集

04-26
©️2020 CSDN 皮肤主题: 游动-白 设计师: 上身试试 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值