js实现选项卡

    li {
        list-style-type: none;
    }

    .tab-title {
        display: flex;
        width: 300px;
        text-align: center;
        line-height: 30px;
    }

    .tab-title li {
        flex: 1;
        background-color: #eee;
        margin-right: 1px;
    }

    .tab-title .active {
        background-color: #f00;
    }

    .tab-body li {
        width: 300px;
        height: 300px;
        background-color: orange;
        display: none;
    }

    .tab-body .show {
        display: block;
    }


<script>
    var a = document.querySelectorAll('.tab-title li');
    var b = document.querySelectorAll('.tab-body li');
    for (var i = 0; i < a.length; i++) {
        a[i].setAttribute('c', i); //setAttribute创建属性
        console.log(a[i]);
        a[i].onclick = function () {
            for (var j = 0; j < a.length; j++) {
                a[j].className = '';
                b[j].className = '';
            }
            this.className = 'active';

            var d = this.getAttribute('c'); //getAttribute获取属性
            console.log(d);
            b[d].className = 'show';
        }
    }