每日一个js实例7--通过面向对象实现选项卡

<div id="box">
        <input type="button" value="1" class="active">
        <input type="button" value="2">
        <input type="button" value="3">
        <div style="display:block">1</div>
        <div>2</div>
        <div>3</div>

    </div>

<style>
            #box input{background: gray;}
            #box div{width: 200px;height: 200px;border: 1px solid red;display: none}
            #box .active{background: gold;}
</style>

<script>
    //第一种写法将属性包装入构造函数中
        // function Tab(id){
        //     //面向对象中属性可称为变量，方法称为函数
        //     this.oBox=document.getElementById(id);
        //     this.aInput=this.oBox.getElementsByTagName("input");
        //     this.aDiv=this.oBox.getElementsByTagName("div");
        //     for(var i=0;i<this.aInput.length;i++){
        //         this.aInput[i].index=i;
        //         var _this=this;
        //         this.aInput[i].οnclick=function(){
        //             for(var i=0;i<_this.aInput.length;i++){
        //                 _this.aInput[i].className="";
        //                 _this.aDiv[i].style.display="none";
        //             }
        //             _this.aInput[this.index].className="active";
        //             _this.aDiv[this.index].style.display="block";
        //         }
        //     }
        // }
        // var tab=new Tab("box");

        //第二种方法，属性在构造函数中申明，方法在原型对象中申明
        // function Tab(id){
        //     //面向对象中属性可称为变量，方法称为函数
        //     this.oBox=document.getElementById(id);
        //     this.aInput=this.oBox.getElementsByTagName("input");
        //     this.aDiv=this.oBox.getElementsByTagName("div");
        //     //this.draw();//在此调用可以
        // }
        // Tab.prototype.draw=function(){
        //     constructor:Tab;
        //     for(var i=0;i<this.aInput.length;i++){
        //         this.aInput[i].index=i;
        //         var _this=this;
        //         this.aInput[i].οnclick=function(){
        //             for(var i=0;i<_this.aInput.length;i++){
        //                 _this.aInput[i].className="";
        //                 _this.aDiv[i].style.display="none";
        //             }
        //             _this.aInput[this.index].className="active";
        //             _this.aDiv[this.index].style.display="block";
        //         }
        //     }
        // }

        // var tab=new Tab("box");
        // tab.draw();//也可以再次调用

         //第三种写法，属性与方法的一部分在构造函数中申明，方法另一部分在原型对象中申明
        // function Tab(id){
        //     //面向对象中属性可称为变量，方法称为函数
        //     this.oBox=document.getElementById(id);
        //     this.aInput=this.oBox.getElementsByTagName("input");
        //     this.aDiv=this.oBox.getElementsByTagName("div");
        //     for(var i=0;i<this.aInput.length;i++){
        //         this.aInput[i].index=i;
        //         var _this=this;
        //         this.aInput[i].οnclick=function(){
        //            _this.draw(this.index);
        //         }
        //     }
        // }
        // Tab.prototype.draw=function(index){
        //      for(var i=0;i<this.aInput.length;i++){
        //                 this.aInput[i].className="";
        //                 this.aDiv[i].style.display="none";
        //             }
        //             this.aInput[index].className="active";
        //             this.aDiv[index].style.display="block";
        // }
        // var tab=new Tab("box");

         //第四种写法，属性与方法全部在构造函数中申明
        function Tab(id){
            this.oBox=document.getElementById(id);
            this.aInput=this.oBox.getElementsByTagName("input");
            this.aDiv=this.oBox.getElementsByTagName("div");
            this.draw=function(){
                  for(var i=0;i<this.aInput.length;i++){
                    this.aInput[i].index=i;
                    var _this=this;
                    this.aInput[i].οnclick=function(){
                        for(var i=0;i<_this.aInput.length;i++){
                            _this.aInput[i].className="";
                            _this.aDiv[i].style.display="none";
                        }
                        _this.aInput[this.index].className="active";
                        _this.aDiv[this.index].style.display="block";
                    }
                }
            }
            this.draw();
        }
        var tab=new Tab("box");
        //tab.draw();
    </script>