【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、函数 改成 方法