An HTML part

<div id="main"> <! -- Active is the default div --><button class="active">11</button>
        <button>22</button>
        <button>33</button><! Display: block is the default div --><div style="display: block;" class="content">11</div>
        <div class="content">22</div>
        <div class="content">33</div>
    </div>
Copy the code

Part two CSS

<style>
        /* Add some styles to make it look better */
        #main {
            width: 1000px;
            height: 500px;
            margin: 0 auto;
            margin-top: 40px;

        }

        div button {
            width: 200px;
            height: 100px;
            margin-left: 30px;
        }

        #main div {
            height: 200px;
            width: 600px;
            margin-top: 50px;
            border: 2px solid rgb(27.26.26);
            margin-left: 60px;
            font-size: 50px;
            text-align: center;
            /* Unselected div is hidden */ by default
            display: none;
        }

        /* Sets the button to change color when clicked */
        .active {
            background-color: rgb(50.202.223);

        }
    </style>
Copy the code

Part three js

<script type="text/javascript">
    // Get button and content before styling
        var btn = document.getElementsByTagName("button")
        var div = document.getElementsByClassName("content");
        // Iterate over the elements
        for (var i = 0; i < btn.length; i++) {
            // This uses the function function when doing. N has a closure. I'm going to include it in the function to solve the problem
            (function (n) {
                // Click on the corresponding button and respond to function to make the event in function
                btn[n].onclick = function () {
                    // Iterate over buttons, restoring default styles for unselected buttons and text boxes
                    for (var j = 0; j < btn.length; j++) {
                        btn[j].className = ""
                        div[j].style.display = "none";
                    }
                    // Displays selected buttons and text styles
                    this.className = "active";
                    div[n].style.display = "block";
                }
            }(i))
        }
    </script>
Copy the code

Four renderings





Five, the whole code

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta Name ="viewport" content="width=device-width, initial-scale=1.0"> <title> TAB </title> </head> <body> <div id="main"> <! <button class="active">11</button> <button>22</button> </button> 33</button> <! <div style="display: block;" class="content">11</div> <div class="content">22</div> <div class="content">33</div> </div> <script Type ="text/javascript"> Behind style var BTN = document operation can proceed. The getElementsByTagName (" button ") var div = document. GetElementsByClassName (" content "); For (var I = 0; i < btn.length; I++) {// this uses the function function when doing. N has a closure. Function (n) {function (n) {function (n) {function (n) {function (n) {function (n) {function (n) { Return to default style for (var j = 0; j < btn.length; j++) { btn[j].className = "" div[j].style.display = "none"; } // Display the selected button and text style this.className = "active"; div[n].style.display = "block"; </script> <style> / #main {width: 1000px; height: 500px; margin: 0 auto; margin-top: 40px; } div button { width: 200px; height: 100px; margin-left: 30px; } #main div { height: 200px; width: 600px; margin-top: 50px; border: 2px solid rgb(27, 26, 26); margin-left: 60px; font-size: 50px; text-align: center; /* Default unselected div hidden */ display: none; Background-color: RGB (50, 202, 223); background-color: RGB (50, 202, 223); background-color: RGB (50, 202, 223); } </style> </body> </html>Copy the code

Come on, everybody. We all got jobs