<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>选项卡案例</title>
<style>
body{ background-color: #ccc; }
.main{ margin: 20px auto; padding: 10px; width: 640px; background-color: #fff; }
.tab{ margin: 30px 0px; padding: 0px; border: 1px solid #f1f1f1; }
.tab-menu{ list-style-type: none; margin: 0px; padding: 0px; background-color: #f1f1f1; }
.tab-menu li{ margin: 0px; padding: 5px 10px; display: inline-block; cursor: pointer; }
.tab-menu-selected{ background-color: #fff; }
.tab-content{ padding: 10px; }
</style>
<script>
function Tab(element){
this.init = function(){
this.box = element; //选项卡盒子
this.index = -1; //选项索引
this.menus = []; //菜单组
this.contents = []; //内容组
var m = this.box.getElementsByClassName('tab-menu'),
c = this.box.getElementsByClassName('tab-content');
if(m.length >= 1 && c.length >= 1){
m = m[0].getElementsByTagName('li');
c = c[0].getElementsByTagName('div');
function mouseover(o, i){
return function(){
o.setIndex(i);
}
}
function mouseout(e){
e.stopPropagation(); //阻止事件冒泡
}
for(var i = 0; i < m.length; i++){
this.menus.push(m[i]);
this.contents.push(c[i]);
this.setIndex(this.index);
m[i].onmouseover = mouseover(this, i);
c[i].onmouseover = mouseover(this, i);
m[i].onmouseout = mouseout;
c[i].onmouseout = mouseout;
}
this.box.onmouseout = function(o){
return function(){
console.log('移出元素');
o.setIndex(-1);
}
}(this);
}else{
console.log('无法初始化，HTML结构不符合约定');
}
}
this.setIndex = function(index){
for(var i = 0; i < this.menus.length; i++){
this.menus[i].className = (i == index) ? 'tab-menu-selected' : '';
this.contents[i].style.display = (i == index) ? 'block' : 'none';
}
}
this.init();
}
window.onload = function(){
var testTab = new Tab(document.getElementById('testTab')),
testTab1 = new Tab(document.getElementById('testTab2'));
}
</script>
</head>
<body>
<div class="main">
<div id="testTab" class="tab">
<ul class="tab-menu">
<li>选项一</li>
<li>选项二</li>
<li>选项三</li>
</ul>
<div class="tab-content">
<div class="tab-item">这是选项卡一的内容</div>
<div class="tab-item">这是选项卡二的内容</div>
<div class="tab-item">这是选项卡三的内容</div>
</div>
</div>
<div id="testTab2" class="tab">
<ul class="tab-menu">
<li>选项一</li>
<li>选项二</li>
<li>选项三</li>
</ul>
<div class="tab-content">
<div class="tab-item">这是选项卡一的内容</div>
<div class="tab-item">这是选项卡二的内容</div>
<div class="tab-item">这是选项卡三的内容</div>
</div>
</div>
</div>
</body>
</html>