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);
    }
} */
相關文章
相關標籤/搜索