JS实现选项卡

  <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
  </ul>
    <div class="current">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>

        * {
            margin: 0;
            padding: 0;
        }
        ul {
            display: flex;
            justify-content: space-between;
            width: 800px;
            height: 100px;
            margin: 50px auto;
        }
        ul li {
            list-style: none;
            width: 200px;
            height: 100px;
            background-color: pink;
            text-align: center;
            line-height: 100px;
            /* float: left; */
            cursor: pointer;
        }
        div {
            width: 800px;
            height: 400px;
            background-color: skyblue;
            /* margin: 20px auto; */
            position: absolute;
            top: 200px;
            left: 50%;
            transform: translate(-50%);
            text-align: center;
            color: #fff;
            font-size: 100px;
            line-height: 400px;
            display: none;
        }
        .current {
            /* z-index: 33; */
            display: block;
        }

        var lis = document.querySelectorAll('li')
        var divs = document.querySelectorAll('div')
        for (var i = 0; i < lis.length; i++) {
            lis[i].setAttribute('index', i)
            lis[i].onclick = function() {
                for (var i = 0; i < lis.length; i++) {
                    lis[i].style.backgroundColor = ''
                }
                this.style.backgroundColor = 'yellow'
                var index = parseInt(this.getAttribute('index'))
                for (var i = 0; i < divs.length; i++) {
                    divs[i].style.display = 'none'
                }
                divs[index].style.display = 'block'
            }
        }