实现选项卡的5种方式

// 切换选项卡的方法，需要传点击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;
    }
}