【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'
                }
                this.className = 'active'
                aDiv[this.index].style.display = 'block'
            }
        }
    }

改成面向对象方式

改写过程：1、不能让函数有嵌套，可以有全局变量

                   2、全局变量 改成 属性

                   3、函数 改成 方法

<script>
    window.onload = function(){
        new TabSwitch('div1')
    }
    function TabSwitch(id) {
        var oDiv = document.getElementById(id)
        this.aBtn = oDiv.getElementsByTagName('input')
        this.aDiv = oDiv.getElementsByTagName('div')
        var _this = this
        for (var i = 0; i < this.aBtn.length; i++) {
            this.aBtn[i].index = i
            this.aBtn[i].onclick = function(){
                _this.fnClick(this) //this指定问题，this表示属于哪个对象
            }
        }
    }
    TabSwitch.prototype.fnClick = function(oBtn){
        for (var i = 0; i < this.aBtn.length; i++) {
            this.aBtn[i].className = ''
            this.aDiv[i].style.display = 'none'
        }
        oBtn.className = 'active'
        this.aDiv[oBtn.index].style.display = 'block'
    }
</script>