面向对象 tab切换

<style>
*{
margin:0;
padding:0;
}
ul{
list-style:none;
overflow:hidden;
}
ul li{
width:100px;
height:40px;
border:1px solid black;
float:left;
text-align:center;
line-height:40px;
}
div{
display:none;
width:406px;
height:406px;
border:1px solid black;
}
.active{
display:block;
}
.active1{
background:yellow;
}
</style>

<ul>
<li class="active1">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div class="active">111111</div>
<div>222222</div>
<div>333333</div>
<div>444444</div>
<script>
//			var oLi = document.getElementsByTagName("li");
//			var oDiv = document.getElementsByTagName("div");
//			for(var i=0;i<oLi.length;i++){
//				oLi[i].index = i;
//				oLi[i].onclick = function(){
//					for(var j=0;j<oDiv.length;j++){
//						oDiv[j].className = "";
//					}
//					oDiv[this.index].className = "active";
//				}
//			}

function tab(obj1,obj2){
this.obj1 = obj1;
this.obj2 = obj2;
}
tab.prototype.tabchange = function(fn){
for(var i=0;i<this.obj1.length;i++){
this.obj1[i].index = i;
var that = this;
this.obj1[i].onclick = function(){
for(var j=0;j<that.obj2.length;j++){
that.obj2[j].className = "";
}
that.obj2[this.index].className = "active";
if(fn){
fn(this);
}
}
}
}
window.onload = function(){
var oLi = document.getElementsByTagName("li");
var oDiv = document.getElementsByTagName("div");
var oTab = new tab(oLi,oDiv);
oTab.changeColor = function(that){
for(var i=0;i<oTab.obj1.length;i++){
oTab.obj1[i].className = "";
}
oTab.obj1[that.index].className = "active1";
}
oTab.tabchange(oTab.changeColor);
}
</script>