1209JS基础总结__for循环tab切换

//获取元素
    var lis = document.getElementsByTagName('li')
    var boxs = document.getElementsByTagName('div')
    //封装的变色函数
    function changeTab(clickIndex) {
        for (var i = 0; i < lis.length; i++) {
            lis[i].className = ''
            boxs[i].className = ''
        }
        lis[clickIndex].className = 'current'
        boxs[clickIndex].className = 'current'
    }
    //操做点击li
    for (var i = 0; i < lis.length; i++) {
        lis[i].index = i;//自定义属性——绑到每一个li身上
        lis[i].onclick = function(){
            changeTab(this.index)
        }

    }

执行顺序是：
先执行html+js完后（for循环的i++已经成为），页面显示出来。用户点击li实现切换变色。

/* ========其它方式===我还不懂啊！！！======= */
// 闭包解决方案
/* for (var i = 0; i < navList.length; i++) {
    navList[i].onclick = (function (i) {
        return function () {
            changeTab(i);
        }
    })(i);
} */

// ES6中的LET解决方案
/* for (let i = 0; i < navList.length; i++) {
    navList[i].onclick = function () {
        changeTab(i);
    }
} */