//獲取元素 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); } } */