核心提示：tab栏封装，三种方法：一、存储当前索引，lis[i].index二、使用闭包实现。三、使用闭包实现，函数立即执行。HTML：!DOCTYPE htmlhtml lang=enheadmeta cha...
tab栏封装，三种方法：
一、存储当前索引，lis[i].index
二、使用闭包实现。
三、使用闭包实现，函数立即执行。
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab栏封装</title>
</head>
<body>
<p id="clothes" class="tab">
<p class="header">
<span class="current">新闻</span>
<span>杭州</span>
<span>浙江</span>
<span>娱乐</span>
</p>
<p>
<ul>
<li class="current">新闻模块</li>
<li>杭州模块</li>
<li>浙江模块</li>
<li>娱乐模块</li>
</ul>
</p>
</p>
<p id="beautity" class="tab">
<p class="header">
<span class="current">新闻</span>
<span>杭州</span>
<span>浙江</span>
<span>娱乐</span>
</p>
<p>
<ul>
<li class="current">新闻模块</li>
<li>杭州模块</li>
<li>浙江模块</li>
<li>娱乐模块</li>
</ul>
</p>
</p>
</body>
</html>
CSS：
body,ul {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
.tab {
width: 300px;
border: 1px solid #ccc;
margin: 100px auto;
}
.tab .header {
overflow: hidden;
}
.tab span {
float: left;
display: inline-block;
width: 70px;
height: 40px;
line-height: 40px;
padding-right: 5px;
text-align: center;
border-bottom: 1px solid #ccc;
}
.tab span.current {
background: #eee;
}
.tab ul {
height: 200px;
}
.tab ul li {
height: 200px;
background: #eee;
display: none;
}
.tab ul li.current {
display: block;
}
JavaScript：
window.onload = function() {
function $(id) {
return document.getElementById(id);
}
/*function tab(obj){
var spans = $(obj).getElementsByTagName('span');
var lis = $(obj).getElementsByTagName('li');
for(var i = 0; i< spans.length; i++){
spans[i].index=i;
spans[i].onmouseover = function(){
for(var j = 0; j< lis.length; j++){
lis[j].className ="";
spans[j].className="";
}
this.className="current";
lis[this.index].className="current";
}
}
}*/
//使用闭包方式实现方法1
function tab(obj) {
var spans = $(obj).getElementsByTagName('span');
var lis = $(obj).getElementsByTagName('li');
for (var i = 0; i < spans.length; i++) {
//spans[i].index=i;
spans[i].onmouseover = fun(i, spans, lis);
}
}
function(num, spans, lis) {
return function() {
for (var j = 0; j < lis.length; j++) {
lis[j].className = "";
spans[j].className = "";
}
spans[num].className = "current";
lis[num].className = "current";
}
}
//-------------------------或者 使用闭包方式实现方法2
function tab(obj) {
var spans = $(obj).getElementsByTagName('span');
var lis = $(obj).getElementsByTagName('li');
for (var i = 0; i < spans.length; i++) {
//spans[i].index=i;
spans[i].onmouseover = function(num, spans, lis) {
return function() {
for (var j = 0; j < lis.length; j++) {
lis[j].className = "";
spans[j].className = "";
}
spans[num].className = "current";
lis[num].className = "current";
}
} (i, spans, lis); //function(){} (); //立即执行，后面括号是参数
}
}
tab("clothes");
tab("beautity");
}
