练习面向对象编程

这个小插件只是用来练习面向对象编程的，只是很普通Tab面板的切换而已，效果请点击：JS练习:OOP版Tab.

代码实现

基本结构

HTML

在HTML中，我们把列表项和内容项分开来，列表项是一个ul，内容是一个DIV里面套了若干个DIV：

<div class="tab">
	<ul class="menu fix">
		<li class="active">menu1</li>
		<li>menu2</li>
		<li>menu3</li>
	</ul>
	<div class="content">
		<div>
			<p>Content1: <br> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
		</div>
		<div class="hide">
			<p>Content2: <br> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
		</div>
		<div class="hide">
			<p>Content3: <br> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
		</div>
	</div>
</div>

然后，我们写一下基本的CSS:

.show{
	display: block;
}
.hide{
	display: none;
}
.tab{
	width:300px;
	margin:0 auto 10px auto;
	color:white;
	.menu{
		padding:0;
		margin:0;
		list-style: none;
		li{
			float:left;
			cursor: pointer;
			padding:5px;
			margin:0 2px 0 0 ;
			font-family:arial;
			text-transform: uppercase;
			border:1px solid #ccc;
			position: relative;
			background:white;
			color:black;
			&.active{
				background:#363636;
				border-bottom:1px solid #363636;
				color:white;
				z-index:3;
			}
		}
	}
	.content{
		margin-top:-1px;
		background:#363636;
		position: relative;
		div{
			padding:10px;
			overflow: hidden;
		}
		border:1px solid #ccc;
	}
}

这时界面是这个样子的：

tab1

JS实现切换

首先，先把整个的tab获取到：

DomLoaded(function(){
	var tab = $byclass("tab");
});

上面代码中：DomLoaded和$byclass方法是事先写好的：跨浏览器DOM加载函数，通过class获取元素。

然后，开始写Tabs构造函数，我们先需要获取tab里面的列表项(每个li)和内容项(.content里的每一个div)，然后给每一个列表项添加mouseover事件：

function Tabs(tab){
	this.menu = $byTagName("li",$byclass("menu",tab));
	this.content = $byTagName("div",$byclass("content",tab));
	var _this = this;
	for(var i=0;i<this.menu.length;i++){
		this.menu[i].index = i;
		addEvent(this.menu[i],"mouseover",function(){
			_this.switchTab(this);
		})
	}
}

上面的代码中，当鼠标经过每个列表项的时候，调用switchTab()方法，所以现在给Tabs的prototype添加一个switchTab()方法：

Tabs.prototype.switchTab = function(menu) {
	for(var i=0;i<this.menu.length;i++){
		this.menu[i].className = '';
		this.content[i].className = 'hide';
	}
	menu.className = "active";
	this.content[menu.index].className = 'show';
};

OK,现在已经可以切换啦！但是有个问题,如果页面里有多个Tab呢？所以我们在新建对象时，需要遍历一下：

DomLoaded(function(){
	var tab = $byclass("tab");
	for(var i=0;i<tab.length;i++){
		new Tabs(tab[i]);
	}
});