[原创] tab选项卡
写tab选项卡，主要可以分两种思路，一种是通过约定html结构，绑定class，然后通过一个js就实现页面内所有的tab。另一种是需要不约定html结构，只通过传id来给tab类来实现。我觉得后一种方式更灵活，虽然缺点是需要为每个tab去实例化一次类，好在问题不算大。用原生js写了个通用的tab类，如下：
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>阿当制作</title>
</head>
<style type="text/css">
.hidden{display:none;}
.select{color:red;}
.select2{color:green;}
</style>
<body>
<div><a href="#" id="t1" class="select">tab1</a> <a href="#" id="t2">tab2</a> <a href="#" id="t3">tab3</a></div>
<div>
<div id="c1">111111111</div>
<div id="c2" class="hidden">222222222</div>
<div id="c3" class="hidden">333333333</div>
</div>
<br />
<br />
<br />
<br />
<br />
<div><a href="#" id="t4" class="select2">tab4</a> <a href="#" id="t5">tab5</a></div>
<div>
<div id="c4">444444444444</div>
<div id="c5" class="hidden">5555555555555</div>
</div>
<br />
<br />
<br />
<br />
<br />
<div><a href="#" id="t6" class="select">tab6</a> <a href="#" id="t7">tab7</a> <a href="#" id="t8">tab8</a></div>
<div>
<div id="c6">6666666666</div>
<div id="c7" class="hidden">777777777777</div>
<div id="c8" class="hidden">8888888888888</div>
</div>
<br />
<br />
<br />
<br />
<br />
<div><a href="#" id="t9" class="select2">tab9</a> <a href="#" id="t10">tab10</a></div>
<div>
<div id="c9">999999999999999</div>
<div id="c10" class="hidden">101010101010101010</div>
</div>
<script type="text/javascript">
function Tab(itemList,config){
if(config){
var activeClass = config.activeClass || "selected";
var act = config.act || "mouseover";
} else {
var activeClass = "selected";
var act = "mouseover";
}
this.index = 0;
this.labelList = [];
this.contentList = [];
this.count = itemList.length;
var scope = this;
var handler = function(){
scope.activeHandle(this,scope,activeClass);
}
for(var i=0,n=this.count;i<n;i++){
var label = this.$(itemList[i].label);
var content = this.$(itemList[i].content);
label.index = content.index = i;
this.labelList.push(label);
this.contentList.push(content);
if(act == "mouseover"){
label.onmouseover = handler;
} else if(act == "click") {
label.onclick = handler;;
}
}
if(config.auto){
var oTime = config.time || 3000;
setInterval(function(){
scope.index++;
if(scope.index >= scope.count){
scope.index = 0;
}
scope.showContent(scope.index,activeClass);
},oTime);
}
}
Tab.prototype = {
$ : function(id){
return document.getElementById(id);
},
activeHandle:function(target,scope,activeClass){
var index = target.index;
var str = activeClass;
scope.index = index;
scope.showContent.call(scope,index,str);
},
showContent:function(index,str){
for(var i=0,n=this.labelList.length;i<n;i++){
if(this.labelList[i].className.indexOf(str)!=-1){
this.labelList[i].className = this.labelList[i].className.split(str).join("");
this.contentList[i].style.display = "none";
}
}
this.labelList[index].className = this.labelList[index].className + " " + str;
this.contentList[index].style.display = "block";
}
}
new Tab([{label:"t1",content:"c1"},{label:"t2",content:"c2"},{label:"t3",content:"c3"}],{activeClass:"select"});
new Tab([{label:"t4",content:"c4"},{label:"t5",content:"c5"}],{activeClass:"select2",act:"click"});
new Tab([{label:"t6",content:"c6"},{label:"t7",content:"c7"},{label:"t8",content:"c8"}],{activeClass:"select",auto:true});
new Tab([{label:"t9",content:"c9"},{label:"t10",content:"c10"}],{activeClass:"select2",act:"click",auto:true,time:8000});
</script>
</body>
</html>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
功能说明：
Tab类，有两个构造参数，第一个参数是数组类型，里面是{labe:"",content:""}的json对象，label对应的是tab的标签，content是tab相应的内容，第二个参数是配置对象，是可选的，有四个参数，第一个是activeClass,用于设置当前激活tab的标签的class名，第二个是act,用于说明tab的触发条件，可以是"click",或者"mouseover",默认是mouseover，第三个是auto,设置是否自动切换，可选，默认是false，如果设置为true还可以设置第四个参数time，用于设置自动切换的间隔时间，可选，单位为微秒，默认为3000。
