写了一个页面，想用javascript实现选项卡的功能，但是没有成功，找了好久都不知道问题出现在
哪里，求各位大神指教，下面是代码：
<!DOCTYPE html>
<html>
<head>
<title>选项卡</title>
<meta charset="UTF-8">
<style type="text/css">
*{margin: 0;padding: 0;}
ul{list-style-type: none;}
#all-content{
width: 300px;
height: 200px;
margin: 50px auto;
}
#ul1{
height: 30px;
width: 202px;
border-bottom: 2px solid red;
}
#ul1 li{
display: inline-block;
width: 50px;
height: 28px;
text-align: center;
margin-left: 10px;
border: 1px solid #999;
border-bottom: none;
}
#ul1 li:hover{cursor: pointer;}
#ul1 li.active{
border-top: 2px solid red;
border-bottom: 2px solid #FFFFFF;
}
#all-content div{
width: 200px;
height: 150px;
border: 1px solid blue;
border-top: none;
}
.show{display: block;}
.hide{display: none;}
</style>
<script type="text/javascript">
window.onLoad=function(){
var aul=document.getElementById("ul1");
var ali=aul.getElementsByTagName("li");
var ald=document.getElementById("all-content");
var adiv=ald.getElementsByTagName("div");
for(var i=0;i<ali.length;i++){
ali[i].index=i;
ali[i].onmouseover=function(){
for(var i=0;i<ali.length;i++){
ali[i].className="";
}
this.className="active";
for(var j=0;j<adiv.length;j++){
adiv[j].className="hide";
}
adiv[this.index]="show";
}
}
}
</script>
</head>
<body>
<div id="all-content">
<ul id="ul1">
<li class="active">房产</li>
<li>家居</li>
<li>二手房</li>
</ul>
<div>
<ul>
<li>aaaaaaaaaaaaaaa</li>
<li>bbbbbbbbbbbbbbb</li>
<li>ccccccccccccccc</li>
<li>ddddddddddddddd</li>
</ul>
</div>
<div class="hide">
<ul>
<li>woshinideduyiwuer</li>
<li>hellokugouhowarey</li>
<li>cbdcfjbvfrjvejuvr</li>
<li>cbdjskfeygshanhed</li>
</ul>
</div>
<div class="hide">
<ul>
<li>hahahahahahahahaha</li>
<li>hahahahahahahahaha</li>
<li>hahahahahahahahaha</li>
<li>hahahahahahahahaha</li>
</ul>
</div>
</div>
</body>
</html>
