实现简单tab选项卡

实现点击按钮显示对应块元素

错误示范：

    <div class="box1 b">box1</div>
    <div class="box2 b">box2</div>
    <div class="box3 b">box3</div>
    <button>box1</button>
    <button>box2</button>
    <button>box3</button>

var con = document.querySelector('.c')
    var divs = document.querySelectorAll('.b')
    var btns = document.querySelectorAll('button')

    for (let i = 0; i < divs.length; i++) {
        btns[i].onclick = function () {
            //点击修改块元素的display属性
            divs[i].style.display = 'block'
            //点击修改按钮的background属性
            btns[i].style.background = 'salmon'
        }
    }

点击另一个按钮后之前的块元素样式和按钮样式没有消失

修改：

for (let i = 0; i < divs.length; i++) {
        btns[i].onclick = function () {
            //在显示点击的div之前通过循环隐藏所有div的样式
            for (let j = 0; j < divs.length; j++) {
                divs[j].style.display = 'none'
            }
            divs[i].style.display = 'block'
            
            //在显示点击的按钮背景色之前通过循环取消所有按钮的背景色
            for (let k = 0; k < btns.length; k++) {
                btns[k].style.background = 'none'
            }
            btns[i].style.background = 'salmon'
        }
    }