选项卡实现

思路：用querySelector获取元素的值，得到的NodeList数组可以使用foreach（）方法，循环绑定

点击事件，清除所有按钮上的active和show样式，再给当前点击的按钮加上active和show样式

css代码

        p{
            display: none;
        }
        .active{
            color: red;
        }
        .show{
            display: block;
        }

html代码

    <button>1</button>
    <button>2</button>
    <button>3</button>
    <p>111</p>
    <p>222</p>
    <p>333</p>

js代码

        var oPs = document.querySelectorAll('p')
        var oBtns = document.querySelectorAll('button')


        oBtns.forEach(function (v , i) {                 //遍历所有按钮
            v.onclick = function () {                    // 给当前点击的按钮绑定点击事件
                oBtns.forEach(function (v2,j) {         
                    v2.classList.remove('active')       // 清除所有按钮上的active和show样式
                    oPs[j].classList.remove('show')
                })
                v.classList.add('active')                // 给当前点击的按钮加上active和show样式
                oPs[i].classList.add('show')
            }
        })