原生js实现Tab切换(排他)功能

<divclass="wrap"><divclass="box">1</div><divclass="box">2</div><divclass="box">3</div><divclass="box">4</div><ul><li></li><li></li><li></li><li></li></ul></div>

    * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .wrap {
            width: 500px;
            height: 400px;
            background: pink;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
        .box {
            width: 500px;
            height: 350px;
            position: absolute;
            left: 0;
            top: 50px;
            color: white;
            text-align: center;
            line-height: 350px;
            font-size: 150px;
        }
        .box:nth-of-type(1) {
            background: red;
        }
        .box:nth-of-type(2) {
            background: yellow;
        }
        .box:nth-of-type(3) {
            background: blue;
        }
        .box:nth-of-type(4) {
            background: green;
        }
        ul li {
            width: 125px;
            height: 50px;
            float: left;
        }
        ul li:nth-of-type(1) {
            background: red;
        }
        ul li:nth-of-type(2) {
            background: yellow;
        }
        ul li:nth-of-type(3) {
            background: blue;
        }
        ul li:nth-of-type(4) {
            background: green;
        }

    // 获取元素
    var aLi = document.getElementsByTagName("li");
    var aBox = document.getElementsByClassName("box");
    function none() {
        for (var i = 0; i <aBox.length;i++){aBox[i].style.display = "none";}}none();aBox[0].style.display = "block";//添加事件for(vari=0;i<aBox.length;i++){        // 储存 i
        aLi[i].index=i;
        aLi[i].onclick=function(){
            none();
            aBox[this.index].style.display="block";
        }
    }
    // aLi[0].onclick = function () {
    //     none();
    //     aBox[0].style.display = "block";
    // }
    // aLi[1].onclick = function () {
    //     none();
    //     aBox[1].style.display = "block";
    // }
    // aLi[2].onclick = function () {
    //     none();
    //     aBox[2].style.display = "block";
    // }
    // aLi[3].onclick = function () {
    //     none();
    //     aBox[3].style.display = "block";
    // }