JS的選項卡的問題
<html>
<head>
<style type="text/css">
*{padding:0px;margin:0px}
#a1{height:400px;width:400px;border:2px solid red;background:yellow}
li{list-style:none}
a{text-decoration:none}
#q1 li{width:40px;height:35px;line-height:35px;text-align:center;float:left;margin-right:3px;background:#7e9fcd;
padding:0 5px 0 5px;color:#303538}
#q1 li a:hover{color:#de4a3f;font-weight:bold}
#aa{position:absolute;top:37px;left:0px;background-color:#437200;height:250px;width:190px;}
#bb{position:absolute;top:37px;background-color:#c962a7;height:250px;width:190px;display:none}
</style>
</head>
<body>
<div id="a1">
<div id="q1" class="q1">
<ul id="qq" class="qq">
<li class="active"><a href="#">天氣1</a></li>
<li><a href="#">天氣2</a></li>
<li><a href="#">天氣3</a></li>
<li><a href="#">天氣4</a></li>
</ul>
</div>
<div id="aa" class="aa">
<p>今天天氣好1111</p><br/>
<p>今天天氣好</p><br/>
<p>今天天氣好</p><br/>
</div>
<div id="bb" class="bb">
<p>今天天氣好啊啊啊22222</p><br/>
<p>今天天氣好啊啊啊</p><br/>
</div>
<div id="bb" class="bb">
<p>今天天氣好33333</p><br/>
<p>今天天氣好</p><br/>
<p>今天天氣好</p><br/>
<p>今天天氣好</p><br/>
</div>
<div id="bb" class="bb">
<p>今天天氣好啊啊啊444444</p><br/>
<p>今天天氣好啊啊啊</p><br/>
</div>
</div>
<script type="text/javascript">
window.onload = function(){
var f1=document.getElementById("qq");
var f2=f1.getElementsByTagName("li");
var f3=document.getElementById("a1");
var f4=f3.getElementsByTagName("div");
for(var i=0;i<f2.length;i++){
f2[i].index=i;
f2[i].onmouseover = function(){
for(var i=0;i<f2.length;i++){
f2[i].className= "";
}
this.className = "active";
for(var j=0;j<f4.length;j++){
f4[j].className="bb";
}
f4[this.index].className="aa";
}
}
}
</script>
</body>
</html>
到底是那出了問題啊 ? ?求求大神指教下 啊 ? ? ? 半個月了啊........求指教 啊 ? 我是萌新。求大神指點 啊
