（对象）选项卡模板
使用对象制作
html代码：
<div id="btn">
<button>1</button>
<button>2</button>
<button>3</button>
</div>
<ul id="list_show">
<li>我是内容1</li>
<li>我是内容2</li>
<li>我是内容3</li>
</ul>
js代码：
function Tab(){
};
Tab.prototype.init = function(btns,lis,eventType){
this.btns = Array.from(btns) //这里转不转为真数组无影响
this.lis = Array.from(lis) //这里转不转为真数组无影响
//console.log(this.btns)
//console.log(this.lis)
this.eventType = typeof eventType === "string" ? eventType : "click"
this.index = 0;
this.bindEvent();
}
Tab.prototype.bindEvent = function(){
for(var i = 0 , ele ; ele = this.btns[i] ; i ++){
ele.addEventListener(this.eventType,this.getIndex.bind(this,i,this.showTab));
}
}
Tab.prototype.getIndex = function(i,next){
this.index = i;
if(typeof next === "function"){
next.call(this);
}
}
Tab.prototype.showTab = function(){
for(var i = 0 ,ele ; ele = this.lis[i] ; i ++){
if(i === this.index){
ele.style.display = "block";
continue;
}else{
ele.style.display = "none"
}
}
}
var btns = document.querySelectorAll("#btn button")
var lis = document.querySelectorAll("#list_show li")
var tab = new Tab();
tab.init(btns,lis)
