选项卡改变为面向对象写法后，复用和增加方法

选项卡改变为面向对象写法后，复用和增加方法

写在前面：这里相当是<简单的选项卡改变为面向对象的写法的一点学习经验总结>后的一个延续版，如果有兴趣可以CSDN上搜搜看<简单的选项卡改变为面向对象的写法的一点学习经验总结>后，可能更好的理解这里的文章，当然啦，大神随意啦，或者给点指导也行，希望可以帮到大家

页面代码结构

**HTML:**
<div class="div1">
  <input type="button" name="1" value="选项1" class="active">
  <input type="button" name="2" value="选项2">
  <input type="button" name="3" value="选项3">
  <div style="display:block">选项1的内容</div>
  <div>选项2的内容</div>
  <div>选项3的内容</div>
</div>
<div class="div2">
  <input type="button" name="1" value="选项1" class="active">
  <input type="button" name="2" value="选项2">
  <input type="button" name="3" value="选项3">
  <div style="display:block">选项1的内容</div>
  <div>选项2的内容</div>
  <div>选项3的内容</div>
</div>

**CSS:**
.div1 div,.div2 div{
  width: 300px;
  height: 200px;
  border: 1px solid lightblue;
  display: none;
}
.active{
  background: lightgreen;
}

JavaScript部分

window.οnlοad=function(){
  var t1=new Tab('.div1');
  t1.init();
  var t2=new Tab('.div2');
  t2.init();
  t2.autoPlay();
};
function Tab(id){
  this.oDiv=document.querySelector(id);//querySelector的使用需要传参进来要带选择符
  this.oInput=this.oDiv.getElementsByTagName('input');
  this.div=this.oDiv.getElementsByTagName('div');
  this.iNow=0;
}
Tab.prototype.init=function(){
  var This=this;
  for (var i = 0; i < this.oInput.length; i++) {
      this.oInput[i].index=i;
      this.oInput[i].οnclick=function(){
        This.change(this);
      }
    }
}
Tab.prototype.change=function(obj){
  for (var i = 0; i < this.oInput.length; i++) {
    this.oInput[i].className="";
    this.div[i].style.display="none";
  }
  obj.className="active";
  this.div[obj.index].style.display="block";
}
//原型上添加一个自动播放的函数
Tab.prototype.autoPlay=function(){
  var That=this;//这里的this指向t2 Tab这个对象
  setInterval(function(){
    //这里要做个判断 走到最后要回到第一个
    if(That.iNow==That.oInput.length-1){
      That.iNow=0;
    }else {
      That.iNow++;
    }
    for (var i = 0; i < That.oInput.length; i++) {
      That.oInput[i].className="";
      That.div[i].style.display="none";
    }
    That.oInput[That.iNow].className="active";
    That.div[That.iNow].style.display="block";
  },2000)
}

这里t2中添加了一个autoplay的方法，区别于第一个t1没有autoplay，这就是复用和面向对象的函数拓展的一个小例子