foreach实现tabs切换，内容相应展示

div内容：

<div class="box">
        <div class="box-item active">
            <p>一</p>
        </div>
        <div class="box-item">
            <p>二</p>
        </div>
        <div class="box-item">
            <p>三</p>
        </div>
        <div class="box-item">
            <p>四</p>
        </div>
        <div class="box-item">
            <p>五</p>
        </div>
    </div>
    <div class="main">
        <div class="main-item main-active ">
            <p>1</p>
        </div>
        <div class="main-item">
            <p>2</p>
        </div>
        <div class="main-item">
            <p>3</p>
        </div>
        <div class="main-item">
            <p>4</p>
        </div>
        <div class="main-item">
            <p>5</p>
        </div>
    </div>

css内容：

.box {
            display: flex;
        }

        .box-item {
            width: 100px;
            text-align: center;
            margin-left: 10px;
            /* background-color: #337ab7; */
        }

        .active {
            background-color: #337ab7;
        }

        .main-item {
            display: none;
        }

        .main-active {
            display: block;
        }

js内容：

//获取要操作的盒子
var topBox = document.querySelector('.box').querySelectorAll('div')
    var mainBox = document.querySelector('.main').querySelectorAll('div')
    //给tabs一个foreach
    topBox.forEach((item, index) => {
    //监听tabs项的点击事件
        item.addEventListener('click', function () {
        //让所有tabs类不变
            topBox.forEach(item => {
                item.className = 'box-item'
            })
            //改变当前tabs类名
            item.className = 'box-item active'
            //让所有内容为display:none
            mainBox.forEach((e, i) => {
                e.className = 'main-item'
            })
            //让选中的tabs为display:block
            mainBox[index].className = 'main-item main-active'
        })
    })