js选项卡制作

<div id="box-list">
            <div class="selects">1</div>
            <div>1</div>
            <div>1</div>
        </div>
        <div id="con-list">
            <div style="background-color: aqua;"></div>
            <div style="background-color: red;display: none;"></div>
            <div style="background-color: blue;display: none;"></div>
        </div>

* {
                margin: 0;
                padding: 0;
            }
            #box-list {
                width: 100%;
                height: 30px;
                display: flex;
                justify-content: center;
            }
            #box-list div {
                width: 100px;
                height: 30px;
                text-align: center;
            }
            .selects {
                background-color: black;
                color: white;
            }
            #con-list {
                width: 100%;
                display: flex;
                justify-content: center;
            }
            #con-list div {
                width: 500px;
                height: 300px;
            }

let kk = document.getElementById('box-list').children;
        let ss = document.getElementById('con-list').children;
        for(let i = 0 ; i < kk.length ; i++){
            kk[i].onclick = function(){
                for(let j = 0 ; j < kk.length ; j++){
                    kk[j].className = '';
                    ss[j].style.display = 'none';
                }
                kk[i].className = 'selects';
                ss[i].style.display = 'block';
            }
        }