tab选项卡（封装版）

tab选项卡（封装版）

适合一个页面多个选项卡使用
CSS部分

<style>
body ul {
	margin: 0px;
	padding: 0px;
}
.box {
	height: 400px;
	width: 500px;
	margin: 100px auto;
	text-align: center;
	border: 1px solid #ccc;
	overflow: hidden;
}
ul {
	height: 40px;
	width: 500px;
	list-style: none;
}
li {
	float: left;
	height: 40px;
	width: 100px;
	font: 500 14px/40px "simsun";
	background-color: #000;
	color: #fff;
	cursor: pointer;
}
span {
	display: none;
	width: 500px;
	height: 360px;
	font: 400 120px/360px "simsun";
	background-color: #fff;
	color: #000;
}
.current {
	background-color: #fff;
	color: #000;
}
.show {
	display: block;
}
</style>

body部分

<div class="box">
	<ul>
		<li class="current">幼儿园</li>
		<li>小学</li>
		<li>初中</li>
		<li>高中</li>
		<li>大学</li>
	</ul>
	<span class="show">幼儿园</span>
	<span>小学</span>
	<span>初中</span>
	<span>高中</span>
	<span>大学</span>
</div>
<div class="box">
	<ul>
		<li class="current">幼儿园</li>
		<li>小学</li>
		<li>初中</li>
		<li>高中</li>
		<li>大学</li>
	</ul>
	<span class="show">幼儿园</span>
	<span>小学</span>
	<span>初中</span>
	<span>高中</span>
	<span>大学</span>
</div>
<div class="box">
	<ul>
		<li class="current">幼儿园</li>
		<li>小学</li>
		<li>初中</li>
		<li>高中</li>
		<li>大学</li>
	</ul>
	<span class="show">幼儿园</span>
	<span>小学</span>
	<span>初中</span>
	<span>高中</span>
	<span>大学</span>
</div>
<script>
var boxArr = document.getElementsByClassName("box");
for(var i=0; i<boxArr.length; i++){
	tab(boxArr[i]);
}
function tab(ele){
	var liArr = ele.getElementsByTagName("li");
	var spanArr = ele.getElementsByTagName("span");
	for(var i=0; i<liArr.length; i++){
		liArr[i].setAttribute("index",i);
		liArr[i].onmouseover = function() {
			for(var j=0; j<liArr.length; j++){
				liArr[j].setAttribute("class","");
				spanArr[j].setAttribute("class","");
			}
			this.setAttribute("class","current");
			spanArr[this.getAttribute("index")].setAttribute("class","show");
		}
	}
}
</script>

效果如下图：