// 切换选项卡的方法，需要传点击li的下标index
function changeTab(index) {
for(var i = 0; i < oList.length; i ++){
oList[i].className = '';
oDiv[i].className = '';
}
oList[index].className = 'select';
oDiv[index].className = 'select';
}
一、自定义属性
每次给点击的li添加自定义属性myIndex，在点击触发事件的时候，传myIndex进行切换
for (let i = 0; i < oList.length; i++) {
oList[i].myIndex = i;
oList[i].onclick = function () {
changeTab(this.myIndex); // this就是当前点击的li
}
}
二、IE6 let关键字
for (let i = 0; i < oList.length; i++) {
oList[i].onclick = function () {
changeTab(i);
};
}
三、闭包（1）
for (let i = 0; i < oList.length; i++) {
oList[i].onclick = function () {
return function () {
changeTab(i);
};
};
}
四、闭包（2）
// 自执行函数
for (var i = 0; i < oList.length; i++) {
~function (i){
oList[i].onclick = function () {
changeTab(i);
}
}(i);
}
五、换一个思路优化，每次点击清空上一个选项卡的样式而不是所有的
var preIndex = 0;
for (var i = 0; i < oList.length; i++) {
oList[i].currentIndex = i;
oList[i].onclick = function () {
//上一个跟当前点击是同一个，后续处理不需要做
if(preIndex === this.currentIndex)
return;
// 先把上一个清除
oList[preIndex].className = oDiv[preIndex].className = null;
// 再让当前这个为select
this.className = oDiv[this.currentIndex].className = 'select';
// 更新下一次点击的上一个
preIndex = this.currentIndex;
}
}
