問題描述

<ul id='tab_top'><li class='current'>公告</li><li>規(guī)則</li><li>論壇</li><li>公益</li><li>安全</li> </ul> <p id='tab_bottom'><p class='tab-content selected'> <ul><li> <a href='http://www.intensediesel.com/wenda/4346.html#'>數(shù)據(jù)七夕:金牛愛送玫瑰</a></li><li> <a href='http://www.intensediesel.com/wenda/4346.html#'>阿里打造'互聯(lián)網(wǎng)監(jiān)管'</a></li><li> <a href='http://www.intensediesel.com/wenda/4346.html#'>10萬家店60萬新品</a></li><li> <a href='http://www.intensediesel.com/wenda/4346.html#'>全球最大網(wǎng)上時裝周</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.設(shè)置索引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.事件處理函數(shù)handler: function (that) { for (var j = 0; j < this.tabLi.length; j++) {this.tabLi[j].className = ’’;// ！駝峰結(jié)構(gòu)this.tabC[j].style.display = ’none’; } // that = li.current; that.className = ’current’;// that 為當(dāng)前的tab上的li this.tabC[that.index].style.display = ’block’;} } window.onload = function () { var tab = new TabFn();tab.initEvent(); }

> 請問下這里setIndex的作用

問題解答

setIndex的作用是給top列表中的元素設(shè)置索引，設(shè)置索引的目的是因?yàn)閎indEvent的時候不能傳遞索引i，因?yàn)檠h(huán)執(zhí)行完畢后，i始終等于this.tabLi.length，而在設(shè)置選項(xiàng)卡內(nèi)容是否隱藏時

this.tabC[that.index].style.display = ’block’;

你需要知道，當(dāng)前是操作的是第幾個li，這也就是setIndex的目的。