tab栏封装,三种方法:
一、存储当前索引,lis[i].index
二、使用闭包实现。
三、使用闭包实现,函数立即执行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab栏封装</title>
<style>
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;
}
</style>
<script>
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");
}
</script>
</head>
<body>
<div id="clothes" class="tab">
<div class="header">
<span class="current">新闻</span>
<span>杭州</span>
<span>浙江</span>
<span>娱乐</span>
</div>
<div>
<ul>
<li class="current">新闻模块</li>
<li>杭州模块</li>
<li>浙江模块</li>
<li>娱乐模块</li>
</ul>
</div>
</div>
<div id="beautity" class="tab">
<div class="header">
<span class="current">新闻</span>
<span>杭州</span>
<span>浙江</span>
<span>娱乐</span>
</div>
<div>
<ul>
<li class="current">新闻模块</li>
<li>杭州模块</li>
<li>浙江模块</li>
<li>娱乐模块</li>
</ul>
</div>
</div>
</body>
</html>