10.23 JQuery排他算法实现tab栏切换

啥也不会写呢

已于 2023-10-23 22:17:29 修改

阅读量44

点赞数

文章标签： jquery javascript

于 2023-10-23 21:33:55 首次发布

本文链接：https://blog.csdn.net/m0_72972367/article/details/133999708

版权

利用JQuery中的排他算法实现tab切换

排他算法:将所有tab栏对象设置为默认样式,然后将当前tab栏更改为目标样式

代码示例:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./code.jquery.com_jquery-3.7.1.js"></script>
    <style>
        body {
            padding: 10rem;
        }

        ul {
            list-style: none;
            width: 70px;
            padding: 0;
            display: inline-block;
        }

        ul li {
            width: auto;
            margin: .825rem 0rem;
        }

        img {
            height: 111%;
            object-fit: contain;
        }

        .demo {
            width: 646px;
            height: 386px;
            top: 197px;
            position: absolute;
            display: inline-block;
        }

        .demo div {
            width: 646px;
            height: 386px;
            overflow: hidden;
        }

        button {
            border: 0;
            font-size: 16px;
            width: 100%;
            padding: 5px 10px;
        }
    </style>
</head>

<body>
    <!-- 按钮部分 -->
    <ul>
        <li><button>按钮1</button></li>
        <li><button>按钮2</button></li>
        <li><button>按钮3</button></li>
        <li><button>按钮4</button></li>
        <li><button>按钮5</button></li>
        <li><button>按钮6</button></li>
        <li><button>按钮7</button></li>
        <li><button>按钮8</button></li>
        <li><button>按钮9</button></li>
    </ul>
    <!-- 照片部分 -->
    <div class="demo">
        <div><img src="./img/img0.jpg"></img></div>
        <div><img src="./img/img1.jpg"></img></div>
        <div><img src="./img/img2.jpg"></img></div>
        <div><img src="./img/img3.jpg"></img></div>
        <div><img src="./img/img4.jpg"></img></div>
        <div><img src="./img/img5.jpg"></img></div>
        <div><img src="./img/img6.jpg"></img></div>
        <div><img src="./img/img7.jpg"></img></div>
        <div><img src="./img/img8.jpg"></img></div>
    </div>
</body>
<script>
    $(function () {
        // 初始化按钮样式
        $("ul li:first button").css("background", "pink");
        $(".demo div").hide();
        $(".demo div").eq(0).show();
        $("ul li button").click(function () {
            $("li button").css("background", "");
            $(this).css("background", "pink");
            //获取当前按钮所在的索引
            var index = $(this).parent().index();
            //获取照片的索引
            var items = $(".demo div");
            //利用排他算法,将照片显示出来
            $(".demo div").hide();
            $(".demo div").eq(index).show();

        })
    })
</script>

</html>