<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0;padding: 0;font-size:14px;}
ul{list-style: none;}
li{ float: left;margin:10px 15px 0 20px ;text-align: center;border: 1px solid #CCC;padding: 3px 5px;}
div{width: 250px;clear: both;margin-left:20px; border: 2px solid #ccc;display: none;}
.active{border-top-color: red}
.
</style>
<script>
window.onload=function(){
var li=document.getElementsByTagName('li');
var oDiv=document.getElementsByTagName('div');
for(var i=0;i<li.length;i++){
li[i].onclick=function(){
for(var j=0;j<oDiv.length;j++){
li[i].className='';
//为什么这里的i会报错未定义，在这个onclick事件中应该能访问到函数之外的变量呀。
oDiv[j].style.display='none';
}
this.className='active';
oDiv[j].style.display='block'
//这里的j也是一样的情况。
}
}
}
</script>
</head>
<body>
<ul>
<li class="active">房产</li>
<li>家居</li>
<li>二手房</li>
</ul>
<div class="active" style="display: block;">
1
</div>
<div>2</div>
<div>3</div>
</body>
</html>将script标签里面的代码改成下面就好了，这是JS闭包的问题，可以参考我之前写的博客
window.onload=function(){
var li=document.getElementsByTagName('li');
var oDiv=document.getElementsByTagName('div');
for(var i=0;i<li.length;i++){
(function(i){
li[i].onclick=function(){
for(var j=0;j<oDiv.length;j++){
li[i].className='';
oDiv[j].style.display='none';
}
this.className='active';
oDiv[i].style.display='block'
}
})(i)
}
}因为你给li循环添加onclick事件之后，变量i的值已经是3了，所以li[3]是未定义的，你可以用一个闭包解决问题，或者给每个li添加个index索引值,一种方案如下
for(var i=0;i<li.length;i++){
li[i].index=i;//添加索引值
li[i].onclick=function(){
for(var j=0;j<oDiv.length;j++){
li[this.index].className='';
oDiv[j].style.display='none';
}//执行完for循环之后，j=3
this.className='active';
oDiv[this.index].style.display='block'
}
}