<ul class="tab-top" id="tab_top">
<li class="current">公告</li>
<li>规则</li>
<li>论坛</li>
<li>公益</li>
<li>安全</li>
</ul>
<p class="tab-bottom" id="tab_bottom">
<p class="tab-content selected">
<ul>
<li>
<a href="#">数据七夕:金牛爱送玫瑰</a>
</li>
<li>
<a href="#">阿里打造"互联网监管"</a>
</li>
<li>
<a href="#">10万家店60万新品</a>
</li>
<li>
<a href="#">全球最大网上时装周</a>
</li>
</ul>
</p>
</p>
// 获得属性
function TabFn() {
this.tabLi = $('tab_top').getElementsByTagName('li');
this.tabC = $('tab_bottom').getElementsByClassName('tab-content');
}
// 定义原型方法
TabFn.prototype = {
// 1.初始化事件
initEvent: function () {
this.setIndex();
this.bindEvent();
},
// 2.设置索引
setIndex: function () {
for (var i = 0; i < this.tabLi.length; i++) {
var li = this.tabLi[i];
li.index = i;
}
},
// 3.绑定事件
bindEvent: function () {
for (var i = 0; i < this.tabLi.length; i++) {
var own = this;
this.tabLi[i].onmouseover = function () {
own.handler(this);
}
}
},
// 4.事件处理函数
handler: function (that) {
for (var j = 0; j < this.tabLi.length; j++) {
this.tabLi[j].className = '';// !驼峰结构
this.tabC[j].style.display = 'none';
}
// that = li.current;
that.className = 'current';// that 为当前的tab上的li
this.tabC[that.index].style.display = 'block';
}
}
window.onload = function () {
var tab = new TabFn();
tab.initEvent();
}
> 请问下这里setIndex的作用
La fonction de setIndex est de définir l'index pour les éléments de la liste supérieure. Le but de la définition de l'index est que l'index i ne peut pas être transmis pendant bindEvent, car une fois la boucle exécutée, i est toujours égal à this.tabLi. .length, et lors de la définition du contenu de l'onglet, que ce soit lors du masquage
Vous devez savoir sur quel li est actuellement opéré, ce qui est le but de setIndex.