<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
font-size:0;
}
.container{
}
.container .tab li{
display: inline-block;
width: 40px;
height: 20px;
color:red;
/*background-color: Grey;*/
border: 1px solid orangered;
border-right-width: 0;
}
.container .tab li:last-child{
border: 1px solid orangered;
}
.select{
background-color: Grey;
}
.container .tab li a{
text-decoration: none;
font-size:14px;
}
.container .content li{
/*display: block;*/
width: 400px;
height: 300px;
border: 1px solid gray;
font-size:14px;
}
.mod{
display: none;
}
.live{
display: block;
}
</style>
</head>
<body>
<div class="container">
<ul class="tab">
<li class="select"><a href="">item1</a></li>
<li><a href="">item2</a></li>
<li><a href="">item3</a></li>
<li><a href="">item4</a></li>
</ul>
<ul class="content">
<li class="mod live">item1 content</li>
<li class="mod">item2 content</li>
<li class="mod">item3 content</li>
<li class="mod">item4 content</li>
</ul>
</div>
<script>
window.onload = function(){
var tab = document.getElementsByClassName('tab');
var tab_li = tab[0].getElementsByTagName('li');
var content = document.getElementsByClassName('content');
var content_li = content[0].getElementsByTagName('li');
for(var i=0;i<tab_li.length;i++){
tab_li[i].onclick = function() {
return test_alert(this, i);
};
}
function test_alert(obj,len){
console.log(len);
return false;
}
};
</script>
</body>
</html>
闭包没做好，专业那个i引用到的是for中i的最后一次for后的值
for(var i=0;i<tab_li.length;i++){
tab_li[i].onclick = (function(i) {
return function(){return test_alert(this, i);}
})(i);
}