面向对象 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>