用js写选项卡

HTML

 <button class="on">1</button>
    <button>2</button>
    <button>3</button>

    <p class="active">111</p>
    <p>222</p>
    <p>333</p>

CSS

<style>
        p {
            display: none;
        }

        .active {
            display: flex;
        }

        .on {
            background-color: skyblue;
        }
    </style>

JS

<script>
        var button = document.querySelectorAll('button');
        var oP = document.querySelectorAll('p');

        for (var i = 0; i < button.length; i++) {
            // 给每个按钮添加index属性  i是计数 遍历得到他的长度0,1,2,3....
            button[i].index = i;
            button[i].onclick = function () {
                //遍历每个按钮和p的值  移除他们所有的属性值
                for (var i = 0; i < button.length; i++) {
                    button[i].classList.remove('on');
                    oP[i].classList.remove('active');
                }
                //点击的按钮单独加上此属性值
                this.classList.add('on');
                // 对应的计数得到对应的op值
                oP[this.index].classList.add('active')
            }
        }
    </script>