php tab代码,tab开发的一个简单实例（代码）

本篇文章给大家带来的内容是关于tab开发的一个简单实例(代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

使用了以下方法

方法1-3中使用的changeTabHandle函数//当前点击按钮的索引

function changeTabHandle(n) {

for(var i=0; i

tabList[i].className = '';

pList[i].className = '';

}

tabList[n].className = 'active';

pList[n].className = 'active';

}

自定义属性名//方法一：自定义属性方法

console.log(tabList);

for (var i = 0;i < tabList.length; i++){

tabList[i]._f_index = i;

tabList[i].onclick = function () {

console.dir(this);

changeTabHandle(this._f_index);

}

}

es6 let//方法二：var --> let

for(let i=0; i

tabList[i].onclick = function() {

changeTabHandle(i);

}

}

闭包

方法一：for(var i=0; i

~function (i) {

tabList[i].onclick = function () {

changeTabHandle(i);

}

}(i)

}

方法二：for(var i=0; i

tabList[i].onclick = function (i) {

return function() {

changeTabHandle(i);

}

}(i)

}

记忆上次是那个被选中而不是全部清空+自定义属性beforeIndex = 0;

for(var i=0; i

tabList[i]._f_index = i;

tabList[i].onclick = function() {

tabList[beforeIndex].className = '';

pList[beforeIndex].className = '';

tabList[this._f_index].className = 'active';

pList[this._f_index].className = 'active';

beforeIndex = this._f_index;

}

}

记忆上次是那个被选中而不是全部清空+letfor(let i=0; i

tabList[i].onclick = function (params) {

tabList[beforeIndex].className = '';

pList[beforeIndex].className = '';

tabList[i].className = 'active';

pList[i].className = 'active';

beforeIndex = i;

}

}

github 实例代码 https://github.com/fung-yu/js... 中的tab篇