每日一个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].onclick=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].onclick=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].onclick=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].onclick=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>