tabSwitch.js

// 传统的方法
window.onload=function(){
	var tab=document.getElementById("tab");
	var a=tab.getElementsByTagName("a");
	var div=tab.getElementsByTagName("div");
	for(var i=0;i<a.length;i++){
		a[i].index=i;
		a[i].onmouseover=function(){
			for(var j=0;j<a.length;j++){
				a[j].className="";
				div[j].style.display="none";
			}
			this.className="active";
			div[this.index].style.display="block";
		};
	}
};




//面向对象方法
window.onload=function(){
	var box=document.getElementById("tab");
	new Tab(box);
};
function Tab(box){
	var _this=this;
	this.a=box.getElementsByTagName("a");
	this.div=box.getElementsByTagName("div");
	for(var i=0;i<this.a.length;i++){
		this.a[i].index=i;
		this.a[i].onclick=function(){
			_this.move(this.index);
		};
	}
}
Tab.prototype.move=function(index){
	for(var i=0;i<this.a.length;i++){
		if(i==index){
			this.a[i].className="active";
			this.div[i].style.display="block";
		}else{
			this.a[i].className="";
			this.div[i].style.display="none";
		}
	}

};