JS基础 面向对象方式写选项卡

一般过程式方式写选项卡：

    <div id="div1">
        <button class="active">11</button>
        <button >22</button>
        <button >33</button>
        <button >44</button>
        <div style="display: block">12</div>
        <div>22</div>
        <div>33</div>
        <div>44</div>
    </div>

    <script>
        window.onload=function(){
            var oDiv=document.getElementById('div1');
            var aBtn=oDiv.getElementsByTagName('button');
            var aDiv=oDiv.getElementsByTagName('div');

            for(var i=0;i<aBtn.length;i++){
                aBtn[i].index=i;
                aBtn[i].onclick=function(){
                    for(var j=0;j<aBtn.length;j++){
                        aBtn[j].className='';
                        aDiv[j].style.display='none';
                    }
                    this.className='active';
                    aDiv[this.index].style.display='block';
                }
            }
        }

改用面向对象方式写选项卡，要用原型prototype给类上加两个方法，注意这里各种this的用法

        window.onload=function(){
            var t1=new Tab('div1');
            t1.init();
        }

        function Tab(id){
            this.oParent=document.getElementById(id);
            this.aBtn=this.oParent.getElementsByTagName('button');
            this.aDiv=this.oParent.getElementsByTagName('div');
            this.iNow=0;
        }

        Tab.prototype.init=function(){
            var This=this;
            for(var i=0;i<this.aBtn.length;i++){
                this.aBtn[i].index=i;
                this.aBtn[i].onclick=function(){
                    This.change(this);
                }
            }
        }

        Tab.prototype.change=function(obj){
            for(var i=0;i<this.aBtn.length;i++){
                this.aBtn[i].className='';
                this.aDiv[i].style.display='none'
            }
            obj.className='active';
            this.aDiv[obj.index].style.display='block';
        }