css代码:

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .box {
        display: flex;
        flex-direction: column;
        width: 400px;
        height: 300px;
        border: 1px solid red;
        margin: 0 auto;
        padding: 1px;
    }
    /* dianan */
    .banner {
        display: flex;
        width: 100%;
        height: 30px;
        border: 1px solid red;
    }
    .site {
        flex-grow: 1;
        width: 20px;
        height: 30px;
        border: 1px solid red;
    }
    .siteColor {
        background-color: brown;
    }
    .main {
        width: 100%;
        height: 270px;
        /* flex-wrap: 1; */
        position: absolute;
    }
    .main:nth-child(1) {
        background-color: aqua;
    }
    .main:nth-child(2) {
        background-color: rgb(19, 44, 44);
    }
    .main:nth-child(3) {
        background-color: rgb(177, 233, 22);
    }
    .main:nth-child(4) {
        background-color: rgb(63, 26, 212);
    }
    .zhuTi {
        position: relative;
    }
</style>

html代码:

 <div class=”box”>
        <!– tou –>
        <div class=”banner”>
            <div class=”site”></div>
            <div class=”site”></div>
            <div class=”site”></div>
            <div class=”site”></div>
        </div>
        <!– zhong –>
        <div class=”zhuTi”>
            <div class=”main” style=”display: block;”></div>
            <div class=”main”></div>
            <div class=”main”></div>
            <div class=”main”></div>
        </div>
    </div>

js代码:

 <script>
//获取元素
        var site = document.querySelectorAll(‘.site’)
        var main = document.querySelectorAll(‘.main’)
//遍历每一个点击按钮
        site.forEach(function (item, index) {
//为每一个按钮设置点击触发事件
            item.onclick = function () {

//排它,每次清除一下item01中没有点击的就remove掉

                site.forEach(function (item01) {
                    item01.classList.remove(‘siteColor’)
                })
//点击添加颜色
                item.classList.add(‘siteColor’)

//遍历盒子中每一个元素得到索引

                main.forEach(function (item02, index02) {
//先全部设置为none不可见,
                    item02.style.display=’none’
//如果索引相等,则block显示
                 if (index == index02) {
                    item02.style.display=’block’
                 }
                })
            }
        })

//ok

    </script>