zoukankan      html  css  js  c++  java
  • 选项卡原生js案列

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            .btn {
                 70px;
                box-shadow: 5px 5px 5px rgba(194, 187, 82, 0.712);
            }
    
            .active {
                background: pink;
            }
    
            .wrap-main>div {
                 200px;
                height: 200px;
                border: 1px solid #333;
                font-size: 30px;
                font-weight: 900px;
                text-align: center;
                line-height: 200px;
                display: none
            }
    
            .wrap-main>div>img {
                 250px;
                height: 250px;
            }
        </style>
    </head>
    
    <body>
        <div class="wrap">
            <div class="wrap-head">
                <button class="btn active">1</button>
                <button class="btn">2</button>
                <button class="btn">3</button>
            </div>
            <div class="wrap-main">
                <div class="content" style="display: block;"><img src="./01.jpg" alt=""></div>
                <div class="content"><img src="./02.jpg" alt=""></div>
                <div class="content"><img src="./05.jpg" alt=""></div>
            </div>
        </div>
        <div class="wrap">
            <div class="wrap-head">
                <button class="btn active">1</button>
                <button class="btn">2</button>
                <button class="btn">3</button>
            </div>
            <div class="wrap-main">
                <div class="content" style="display: block;"><img src="./01.jpg" alt=""></div>
                <div class="content"><img src="./02.jpg" alt=""></div>
                <div class="content"><img src="./05.jpg" alt=""></div>
            </div>
        </div>
        <div class="wrap">
            <div class="wrap-head">
                <button class="btn active">1</button>
                <button class="btn">2</button>
                <button class="btn">3</button>
            </div>
            <div class="wrap-main">
                <div class="content" style="display: block;"><img src="./01.jpg" alt=""></div>
                <div class="content"><img src="./02.jpg" alt=""></div>
                <div class="content"><img src="./05.jpg" alt=""></div>
            </div>
        </div>
        <script>
            function tab(wrap) {
                var btns = wrap.querySelectorAll("button");
                var divs = wrap.querySelectorAll(".content");
                for (var i = 0; i < btns.length; i++) {
                    btns[i].index = i;//自定义属性,作为下标
                    btns[i].onclick = function () {
                        for (var i = 0; i < btns.length; i++) {
                            btns[i].classList.remove("active");
                            divs[i].style.display = "none";
                        }
                        this.classList.add("active");
                        divs[this.index].style.display = "block";
                    }
                }
            }
            var wraps = document.querySelectorAll(".wrap");
            for (var i = 0; i < wraps.length; i++) {
                tab(wraps[i]);
            }
    
        </script>
    </body>
    
    </html>
  • 相关阅读:
    10 个雷人的注释,就怕你不敢用!
    Java 14 之模式匹配,非常赞的一个新特性!
    poj 3661 Running(区间dp)
    LightOJ
    hdu 5540 Secrete Master Plan(水)
    hdu 5584 LCM Walk(数学推导公式,规律)
    hdu 5583 Kingdom of Black and White(模拟,技巧)
    hdu 5578 Friendship of Frog(multiset的应用)
    hdu 5586 Sum(dp+技巧)
    hdu 5585 Numbers
  • 原文地址:https://www.cnblogs.com/lilamisu/p/13848765.html
Copyright © 2011-2022 走看看