JS——面向对象实例

面向过程的选项卡

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById("div1");
        var oBtn = oDiv.getElementsByTagName("input");
        var aDiv = oDiv.getElementsByTagName("div");

        for (var i = 0 ;i < oBtn.length; i++){
            oBtn[i].index = i;
            oBtn[i].onclick = function(){
                //清空内容
                for(var i = 0; i < oBtn.length; i++){
                    oBtn[i].className ='';
                    aDiv[i].style.display = "none";
                }
                //为点击的按钮添加active
                this.className = "active";

                //为对应div加上display:block
                aDiv[this.index].style.display = "block";
            }
        }
    }
script>
<body>
    <div id="div1">
        <input type="button" class="active" value="a">
        <input type="button" value="b">
        <input type="button" value="c">
        <div style = "display: block">aaaadiv>
        <div>bbbbdiv>
        <div>ccccdiv>
    div>

body>


改写成面向对象

原则:

不能有函数嵌套,但可以有全局变量。

过程:

onload  ->  构造函数

全局变量 ->  属性

函数    ->  方法


实例:

//原来的onload,变成TabSwitch函数,把div的ID作为参数传进去
function TabSwitch(id){
        var _this = this;

        //先获取最外层的div
        var oDiv = document.getElementById(id);

        //这些全局变量,都变成了TabSwitch对象上的属性
        this.oBtn = oDiv.getElementsByTagName("input");
        this.aDiv = oDiv.getElementsByTagName("div");

        for (var i = 0 ;i < this.oBtn.length; i++){
            this.oBtn[i].index = i;
            this.oBtn[i].onclick = function(){
                //下面定义的方法,是在TabSwitch对象上的,所以我们需要_this,而this指的是按钮
                _this.fnClick(this);
            };
        }
    }

    //这里的oBtn其实就是上面的按钮
    TabSwitch.prototype.fnClick = function (oBtn){
        //清空内容
        for(var i = 0; i < this.oBtn.length; i++){
            this.oBtn[i].className ='';
            this.aDiv[i].style.display = "none";
        }
        //为点击的按钮添加active
        oBtn.className = "active";

        //为对应div加上display:block
        this.aDiv[oBtn.index].style.display = "block";
    }

你可能感兴趣的:(javascript)