<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#bl{
margin: 0;
padding:0 ;
list-style-type: none;
}
#dh li{
float: left;
width: 60px;
border-color:peachpuff ;
border-style: solid;
text-align: center;
background-color: #FFDAB9;
}
#bl li a{
display: block;
padding: 0.3em;
color: darkblue;
}
#bl li a:hover,#bl li a:focus
{
background-color: deepskyblue;
color:aliceblue ;
}
#clear{
clear:both ;
}
.content{
width: 260px;
height: 270px;
background-color:azure;
margin-top: ;
float: left;
display:none;
}
.content1{
display: none;
}
</style>
</head>
<body>
<div id="dh">
<ul id="bl">
<li ><a>房产</a></li>
<li><a>家居</a></li>
<li><a>二手房</a></li>
</ul>
</div>
<div id="clear"></div>
<div class="content">
<p>
275万购昌平邻铁三居 总价20万买一居
200万内购五环三居 140万安家东三环
北京首现零首付楼盘 53万购东5环50平
京楼盘直降5000 中信府 公园楼王现房
</p>
</div>
<div class="content">
<p>
40平出租屋大改造 美少女的混搭小窝
经典清新简欧爱家 90平老房焕发新生
新中式的酷色温情 66平撞色活泼家居
瓷砖就像选好老婆 卫生间烟道的设计
</p>
</div>
<div class="content">
<p>
通州豪华3居260万 二环稀缺2居250w甩
西3环通透2居290万 130万2居限量抢购
黄城根小学学区仅260万 121平70万抛!
独家别墅280万 苏州桥2居优惠价248万
</p>
</div>
</body>
<script type="text/javascript">
var aa=document.getElementsByTagName("a");
for(var i=0;i<aa.length;i++){
aa[i].onmouseover=function(){
document.getElementsByClassName("content")[i].style.cssText="display: block;";
}
aa[i].onmouseout=function(){
document.getElementsByClassName("content1")[i].style.cssText="display: none;";
}
}
</script>
</html>
一直运行不了，显示"Uncaught TypeError: Cannot read property 'style' of undefined"
aa[i].onmouseover=function(){
document.getElementsByClassName("content")[i].style.cssText="display: block;";
}
aa[i].onmouseout=function(){
document.getElementsByClassName("content1")[i].style.cssText="display: none;";
}
请仔细看一下这两句，你会发现按钮所绑定的事件执行的代码是怎样的，这个document.getElementsByClassName("content")[i].style.cssText="display: block;"; 所以每一次触发事件时，就会把classname为"content"的节点数组里的i取出来对吧!!重点是这个i，i在执行完for循环后就一直是3（js里for声明的变量不仅在for里生效），所以会执行document.getElementsByClassName("content")[3]，我们知道这个数组长为3，所以只有0-2，所以style自然是undefined。
修改代码:
for(var i=0;i<aa.length;i++){
aa[i].value = i;
aa[i].onmouseover=function(){
document.getElementsByClassName("content")[this.value].style.cssText="display: block;";
}
aa[i].onmouseout=function(){
document.getElementsByClassName("content")[this.value].style.cssText="display: none;";
}
我们把每一个节点的value设为对应i，将执行代码i改为this.value，由于this.value并不会随i变化而变化并且能代表对应的节点所以能放心使用。(PS:注意把onmouseout里content1改回content)