选项卡制作


/**
通过改变按钮的类名，然后改变它的颜色，this是代指当前事件，可以通过在js中添加标签来确定div的名字，通过点击事件来改变它的状态


*/
<style>
        .active {
            background: yellow;
        }
        
        #box div {
            width: 150px;
            height: 200px;
            display: none;
            border: orangered 1px solid;
            background: #ccc;
        }
    </style>
    <script>
        window.onload = function() {
            var odiv = document.getElementById('box');
            var obtn = odiv.getElementsByTagName('input');
            var adiv = odiv.getElementsByTagName('div');

            for (var i = 0; i < obtn.length; i++) {
                obtn[i].index = i;
                obtn[i].onclick = function() {
                    for (var i = 0; i < obtn.length; i++) {
                        obtn[i].className = '';
                        adiv[i].style.display = 'none';
                    }
                    this.className = 'active';
                    adiv[this.index].style.display = 'block';
                }
            }
        }
    </script>

</head>

<body>


    <div id="box">
        <input class="active" type="button" value="教育" />
        <input type="button" value="出国" />
        <input type="button" value="考研" />



        <div style="display: block;">111</div>
        <div>222</div>
        <div>333</div>
    </div>

</body>
js选项卡制作

选项卡制作
