jQuery-Tab选项卡切换

朱军_
456 阅读8分钟

效果如下图：

jQuery代码及其思路如下：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(function () {
            $(".title li").click(function () {
            //找到title下面的li ，当前点击的li添加active样式，其他的兄弟元素中有active样式的li则移除该样式， 
                $(this).addClass("active").siblings(".active").removeClass("active");
                //获得items下的li，通过eq($(this).index())得到当前点击的title中的li的下标，并将该下边对应的items 中的li显示,再让其他的兄弟元素li隐藏。
                $(".items li").eq($(this).index()).show().siblings().hide();
            })
        })
    </script>

完整代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQery选项卡切换</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
        }

        .main {
            width: 500px;
            /*height: 400px; */
            padding: 5px;
            margin: 30px auto;
            border: 1px solid red;
        }

        .main .title {
            display: flex;
        }

        .main .title li {
            width: 25%;
            height: 45px;
            border-radius: 10px;
            text-align: center;
            line-height: 45px;
            margin: 0 2px;
            border: 1px solid #ccc;
            cursor: pointer;
            user-select: none;
        }

        .main .title li.active {
            background-color: orangered;
            color: #fff;
            border: none;
        }

        .main .items {
            width: 100%;
            height: 100%;
            margin: 5px 0;
            /* background-color: blue; */
        }

        .main .items li {
            width: 100%;
            height: 100%;
            /* border: 1px solid red; */
            text-align: center;
            display: none;
        }

        .main .items li.on {
            display: block;
        }

        .main .items li img {
            display: inline-block;
            width: 100px;
            height: 100px;
            margin: 0 5px;
        }
    </style>
</head>

<body>
    <div class="main">
        <ul class="title">
            <li class="active">蛋糕</li>
            <li>糖果</li>
            <li>巧克力</li>
            <li>雪糕</li>
        </ul>
        <ul class="items">
            <li class="on">
                <img src="http://img4.imgtn.bdimg.com/it/u=1391022628,3582355114&fm=26&gp=0.jpg" alt="">
                <img src="http://img4.imgtn.bdimg.com/it/u=1391022628,3582355114&fm=26&gp=0.jpg" alt="">
                <img src="http://img4.imgtn.bdimg.com/it/u=1391022628,3582355114&fm=26&gp=0.jpg" alt="">
                <img src="http://img4.imgtn.bdimg.com/it/u=1391022628,3582355114&fm=26&gp=0.jpg" alt="">
                <img src="http://img4.imgtn.bdimg.com/it/u=1391022628,3582355114&fm=26&gp=0.jpg" alt="">
                <img src="http://img4.imgtn.bdimg.com/it/u=1391022628,3582355114&fm=26&gp=0.jpg" alt="">
                <img src="http://img4.imgtn.bdimg.com/it/u=1391022628,3582355114&fm=26&gp=0.jpg" alt="">
                <img src="http://img4.imgtn.bdimg.com/it/u=1391022628,3582355114&fm=26&gp=0.jpg" alt="">
                <img src="http://img4.imgtn.bdimg.com/it/u=1391022628,3582355114&fm=26&gp=0.jpg" alt="">
                <img src="http://img4.imgtn.bdimg.com/it/u=1391022628,3582355114&fm=26&gp=0.jpg" alt="">
                <img src="http://img4.imgtn.bdimg.com/it/u=1391022628,3582355114&fm=26&gp=0.jpg" alt="">
                <img src="http://img4.imgtn.bdimg.com/it/u=1391022628,3582355114&fm=26&gp=0.jpg" alt="">
            </li>
            <li>
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593420227761&di=14ba18b2308a249cd743f77f2e6ebb9c&imgtype=0&src=http%3A%2F%2Fs28.9956.cn%2Fstatic%2Fupload%2Fimage%2F20170302%2F1488418215420490.jpg"
                    alt="">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593420227761&di=14ba18b2308a249cd743f77f2e6ebb9c&imgtype=0&src=http%3A%2F%2Fs28.9956.cn%2Fstatic%2Fupload%2Fimage%2F20170302%2F1488418215420490.jpg"
                    alt="">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593420227761&di=14ba18b2308a249cd743f77f2e6ebb9c&imgtype=0&src=http%3A%2F%2Fs28.9956.cn%2Fstatic%2Fupload%2Fimage%2F20170302%2F1488418215420490.jpg"
                    alt="">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593420227761&di=14ba18b2308a249cd743f77f2e6ebb9c&imgtype=0&src=http%3A%2F%2Fs28.9956.cn%2Fstatic%2Fupload%2Fimage%2F20170302%2F1488418215420490.jpg"
                    alt="">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593420227761&di=14ba18b2308a249cd743f77f2e6ebb9c&imgtype=0&src=http%3A%2F%2Fs28.9956.cn%2Fstatic%2Fupload%2Fimage%2F20170302%2F1488418215420490.jpg"
                    alt="">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593420227761&di=14ba18b2308a249cd743f77f2e6ebb9c&imgtype=0&src=http%3A%2F%2Fs28.9956.cn%2Fstatic%2Fupload%2Fimage%2F20170302%2F1488418215420490.jpg"
                    alt="">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593420227761&di=14ba18b2308a249cd743f77f2e6ebb9c&imgtype=0&src=http%3A%2F%2Fs28.9956.cn%2Fstatic%2Fupload%2Fimage%2F20170302%2F1488418215420490.jpg"
                    alt="">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593420227761&di=14ba18b2308a249cd743f77f2e6ebb9c&imgtype=0&src=http%3A%2F%2Fs28.9956.cn%2Fstatic%2Fupload%2Fimage%2F20170302%2F1488418215420490.jpg"
                    alt="">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593420227761&di=14ba18b2308a249cd743f77f2e6ebb9c&imgtype=0&src=http%3A%2F%2Fs28.9956.cn%2Fstatic%2Fupload%2Fimage%2F20170302%2F1488418215420490.jpg"
                    alt="">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593420227761&di=14ba18b2308a249cd743f77f2e6ebb9c&imgtype=0&src=http%3A%2F%2Fs28.9956.cn%2Fstatic%2Fupload%2Fimage%2F20170302%2F1488418215420490.jpg"
                    alt="">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593420227761&di=14ba18b2308a249cd743f77f2e6ebb9c&imgtype=0&src=http%3A%2F%2Fs28.9956.cn%2Fstatic%2Fupload%2Fimage%2F20170302%2F1488418215420490.jpg"
                    alt="">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593420227761&di=14ba18b2308a249cd743f77f2e6ebb9c&imgtype=0&src=http%3A%2F%2Fs28.9956.cn%2Fstatic%2Fupload%2Fimage%2F20170302%2F1488418215420490.jpg"
                    alt="">
            </li>
            <li>
                <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1352057584,1685279614&fm=26&gp=0.jpg"
                    alt="">
                <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1352057584,1685279614&fm=26&gp=0.jpg"
                    alt="">
                <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1352057584,1685279614&fm=26&gp=0.jpg"
                    alt="">
                <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1352057584,1685279614&fm=26&gp=0.jpg"
                    alt="">
                <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1352057584,1685279614&fm=26&gp=0.jpg"
                    alt="">
                <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1352057584,1685279614&fm=26&gp=0.jpg"
                    alt="">
                <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1352057584,1685279614&fm=26&gp=0.jpg"
                    alt="">
                <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1352057584,1685279614&fm=26&gp=0.jpg"
                    alt="">
                <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1352057584,1685279614&fm=26&gp=0.jpg"
                    alt="">
                <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1352057584,1685279614&fm=26&gp=0.jpg"
                    alt="">
                <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1352057584,1685279614&fm=26&gp=0.jpg"
                    alt="">
                <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1352057584,1685279614&fm=26&gp=0.jpg"
                    alt="">
            </li>
            <li>
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593420389967&di=e2b3f699e6355a85edf1a95f02da47e9&imgtype=0&src=http%3A%2F%2Fimg1.99114.com%2Fgroup10%2FM00%2F33%2F78%2FrBADslogm6mAfXnzAACy58Pe2Vk060.jpg"
                    alt="">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593420389967&di=e2b3f699e6355a85edf1a95f02da47e9&imgtype=0&src=http%3A%2F%2Fimg1.99114.com%2Fgroup10%2FM00%2F33%2F78%2FrBADslogm6mAfXnzAACy58Pe2Vk060.jpg"
                    alt="">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593420389967&di=e2b3f699e6355a85edf1a95f02da47e9&imgtype=0&src=http%3A%2F%2Fimg1.99114.com%2Fgroup10%2FM00%2F33%2F78%2FrBADslogm6mAfXnzAACy58Pe2Vk060.jpg"
                    alt="">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593420389967&di=e2b3f699e6355a85edf1a95f02da47e9&imgtype=0&src=http%3A%2F%2Fimg1.99114.com%2Fgroup10%2FM00%2F33%2F78%2FrBADslogm6mAfXnzAACy58Pe2Vk060.jpg"
                    alt="">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593420389967&di=e2b3f699e6355a85edf1a95f02da47e9&imgtype=0&src=http%3A%2F%2Fimg1.99114.com%2Fgroup10%2FM00%2F33%2F78%2FrBADslogm6mAfXnzAACy58Pe2Vk060.jpg"
                    alt="">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593420389967&di=e2b3f699e6355a85edf1a95f02da47e9&imgtype=0&src=http%3A%2F%2Fimg1.99114.com%2Fgroup10%2FM00%2F33%2F78%2FrBADslogm6mAfXnzAACy58Pe2Vk060.jpg"
                    alt="">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593420389967&di=e2b3f699e6355a85edf1a95f02da47e9&imgtype=0&src=http%3A%2F%2Fimg1.99114.com%2Fgroup10%2FM00%2F33%2F78%2FrBADslogm6mAfXnzAACy58Pe2Vk060.jpg"
                    alt="">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593420389967&di=e2b3f699e6355a85edf1a95f02da47e9&imgtype=0&src=http%3A%2F%2Fimg1.99114.com%2Fgroup10%2FM00%2F33%2F78%2FrBADslogm6mAfXnzAACy58Pe2Vk060.jpg"
                    alt="">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593420389967&di=e2b3f699e6355a85edf1a95f02da47e9&imgtype=0&src=http%3A%2F%2Fimg1.99114.com%2Fgroup10%2FM00%2F33%2F78%2FrBADslogm6mAfXnzAACy58Pe2Vk060.jpg"
                    alt="">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593420389967&di=e2b3f699e6355a85edf1a95f02da47e9&imgtype=0&src=http%3A%2F%2Fimg1.99114.com%2Fgroup10%2FM00%2F33%2F78%2FrBADslogm6mAfXnzAACy58Pe2Vk060.jpg"
                    alt="">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593420389967&di=e2b3f699e6355a85edf1a95f02da47e9&imgtype=0&src=http%3A%2F%2Fimg1.99114.com%2Fgroup10%2FM00%2F33%2F78%2FrBADslogm6mAfXnzAACy58Pe2Vk060.jpg"
                    alt="">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593420389967&di=e2b3f699e6355a85edf1a95f02da47e9&imgtype=0&src=http%3A%2F%2Fimg1.99114.com%2Fgroup10%2FM00%2F33%2F78%2FrBADslogm6mAfXnzAACy58Pe2Vk060.jpg"
                    alt="">
            </li>
        </ul>
    </div>


    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(function () {
            $(".title li").click(function () {
            //找到title下面的li ，当前点击的li添加active样式，其他的兄弟元素中有active样式的li则移除该样式， 
                $(this).addClass("active").siblings(".active").removeClass("active");
                //获得items下的li，通过eq($(this).index())得到当前点击的title中的li的下标，并将该下边对应的items 中的li显示,再让其他的兄弟元素li隐藏。
                $(".items li").eq($(this).index()).show().siblings().hide();
            })
        })
    </script>
</body>

</html>
avatar
文章
阅读
粉丝