javascript - Que fait SetIndex?
伊谢尔伦
伊谢尔伦 2017-07-05 10:53:15
0
1
743
<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的作用
伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳,潜力无限,来学PHP伐。

répondre à tous(1)
我想大声告诉你

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

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

Vous devez savoir sur quel li est actuellement opéré, ce qui est le but de setIndex.

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal