面向对象写选项卡

/*
window.onload = function () {
     var oDiv  = document.getElementById("div1");
     var aBtn = oDiv.getElementsByTagName("input");
     var aDiv = oDiv.getElementsByTagName("div");
     var i = 0;
     for(i=0;i<aBtn.length;i++){
       aBtn[i].index = i;
       aBtn[i].onclick = function () {
           for(i=0;i<aBtn.length;i++){
               aBtn[i].className = "";
               aDiv[i].style.display = "none";
           }
         this.className = "active";
         aDiv[this.index].style.display = "block";
       };
     };
 };
 */

// 将常规的面向过程的写法改成面向对象的写法
//   1,前提：所有东西都在onload里;
//   2,改写：不能有函数嵌套，可以有全局变量;
//   3,   onload  --   构造函数
//        全局变量  --   属性
//          函数   --   方法
//   4,改错： 主要是this的指向关系
//

function Tab(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.table(this);
        };
    };
};

Tab.prototype.table = function(btn) {
    for(var i=0;i<this.aBtn.length;i++){
        this.aBtn[i].className = "";
        this.aDiv[i].style.display = "none";
    }
    btn.className = "active";
    this.aDiv[btn.index].style.display = "block";
};

 window.onload = function () {
      new Tab("div1");
 };