一个面向对象的选项卡,再也不怕页面上多个选项卡冲突了!

html
   <div class="wrap">
<input type="button" value="button0" class="active">
<input type="button" value="button1">
<input type="button" value="button2">
<div style="display:block">1</div>
<div>2</div>
<div>3</div>
</div>
<div class="wrap2">
<input type="button" value="button0" class="active">
<input type="button" value="button1">
<input type="button" value="button2">
<div style="display:block">1</div>
<div>2</div>
<div>3</div>
</div>
css
      *{padding: 0;margin: 0;}
.wrap,.wrap2{width: 350px;height: auto;margin: 0 auto;}
.wrap input,.wrap2 input{width: 100px;height: 30px;border: 1px solid #333;margin-right: 10px;}
.wrap div,.wrap2 div{width: 330px;height: 330px;border: 1px solid #333;display: none;}
.active{background: red;}
js
  window.onload=function(){
var t1=new Tab(".wrap");
t1.init();
var t2=new Tab(".wrap2");
t2.init();
}
function Tab(id){
this.wrap=document.querySelector(id);
this.Oipt=this.wrap.querySelectorAll("input");
this.Odiv=this.wrap.querySelectorAll("div");
}
Tab.prototype.init=function(){
for(var i=0;i<this.Oipt.length;i++){
var This=this;
this.Oipt[i].index=i;
this.Oipt[i].onclick=function(){
This.change(this)
};
}
}
Tab.prototype.change=function(obj){
for(var i=0;i<this.Oipt.length;i++){
this.Oipt[i].className='';
this.Odiv[i].style.display="none"
}
obj.className="active";
this.Odiv[obj.index].style.display="block";
}

效果如下:

mxdx.jpg

ps:尚未加入自动播放,感兴趣的小伙伴快来改进。

1 个评论

来加个自动播放
Tab.prototype.autoplay=function(time){
var This=this;
clearInterval(timer)
var timer=setInterval(function(){
if(This.iNow==This.Oipt.length-1){
This.iNow=0
}else{
This.iNow++;
}
for(var i=0;i<This.Oipt.length;i++){
This.Oipt[i].className='';
This.Odiv[i].style.display="none";
}
This.Oipt[This.iNow].className="active";
This.Odiv[This.iNow].style.display="block";
}, time);
}
再构造函数Tab中加入初始值this.iNow=0;
在实例化之后加调用并传入时间参数
t2.autoplay(3000);
好了 可自动播放了,但是觉得这么写性能肯定不太好。。

要回复文章请先登录注册