javaScript排他tab页

<div id="tabContent">
    <div class="div" style="display:block">1</div>
    <div class="div">2</div>
    <div class="div">3</div>
</div>

<script>
    var li = document.querySelectorAll("li");
    for (var i = 0; i < li.length; i++) {
        li[i].abc = i;
        // console.log(li[i].abc)
        li[i].onclick = function () {
            // console.log(this)
            var div = document.querySelectorAll('.div');

            //排他
            for (var j = 0; j < div.length; j++) {
                // console.log(div[j])
                li[j].className = ''
                div[j].style.display = 'none';
            }

            console.log(div[this.abc]);
            li[this.abc].className = 'ligthcolor';
            div[this.abc].style.display = 'block';

        }

    }

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31