//获取元素
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);
}
} */
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。