                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JavaScript進階篇

為什么無法實現三個欄目的切換

<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>實踐題?-?選項卡</title>
????<style?type="text/css">
?????/*?CSS樣式制作?*/??
?????*{margin:0;?padding:0;?font:normal?16px?"微軟雅黑";color:#000000;}?
?????
?????ul{list-style-type:?none;}
?????a{text-decoration:?none;}
?????
?????#tab{width:?300px;height:190px;margin:?20px?auto;list-style-type:?none;}
?????
?????#main{border-bottom:2px?solid?#8B4513;height:?32px;}
?????#main?li{display:inline-block;line-height:30px;width:60px;text-align:center;border:2px?solid?#999;border-bottom:none;margin-left:5px;}
?????#main?li.hover{cousor:pointer}
?????#main?li.action{border-top:2px?solid?#8B4513;border-bottom:2px?solid?#FFFFFF;}
?????
?????#tab?div{border:?2px?solid?#7396B8;border-top:?none;}
?????#tab?div?li{height:?30px;line-height:?30px;text-indent:?2px;}
?????
?????.show{display:?block;}
?????.hide{display:?none;}
?????
????</style>
????<script?type="text/javascript">
????/*?實現切換效果?*/???
????window.onload?=?function(){
????????var?tab?=?document.getElementById("tab");
????????var?main?=?document.getElementById("main");
????????var?mainli?=?main.getElementsByTagName("li");
????????var?div?=?tab.getElementsByTagName("div");
????????for(var?i=0;i<mainli.length;i++){
????????????mainli[i].index?=?i;
????????????mainli[i].onmouseover?=?function(){
????????????????for(var?j=0;j<mainli.length;j++){
????????????????????mainli[i].className?=?"";
????????????????}
????????????????this.className?=?"action";
????????????????
????????????????for(var?j=0;j<div.length;j++){
????????????????????div[j].className?=?"hide";
????????????????}
????????????????div[this.index].className?=?"show";
????????????}
????????}
????????
????}

????</script>
?
</head>
<body>
<!--?HTML頁面布局?-->
<div?id="tab">
????<ul??id?=?"main">
????????<li>房產</li><li>家居</li><li>二手房</li>
????</ul>
????<div>
????????<ul?>
????????????<li><a?href="javascript:;">275萬購昌平鄰鐵三居?總價20萬買一居</a></li>
????????????<li><a?href="javascript:;">200萬內購五環三居?1400萬安家京一環</a></li>
????????????<li><a?href="javascript:;">北京首現零首付樓盤?53萬購東5環50平</a></li>
????????????<li><a?href="javascript:;">京樓盤直降5000?中信府?公園樓王現房</a></li>
????????</ul>
????</div>
????<div>
????????<ul>
????????????<li><a?href="javascript:;">40平出租屋大改造?美少女的混搭小窩</a></li>
????????????<li><a?href="javascript:;">經典清新簡歐愛家?90平老房煥發新生</a></li>
????????????<li><a?href="javascript:;">新中式的酷色溫情?66平撞色活潑家居</a></li>
????????????<li><a?href="javascript:;">瓷磚就像選好老婆?衛生間煙道的設計</a></li>
????????</ul>
????</div>????
????<div>
????????<ul>
????????????<li><a?href="javascript:;">通州豪華3居260萬?二環稀缺2居250w甩</a></li>
????????????<li><a?href="javascript:;">西3環通透2居290萬?130萬2居限量搶購</a></li>
????????????<li><a?href="javascript:;">黃城根小學學區僅260萬?121平70萬拋!</a></li>
????????????<li><a?href="javascript:;">獨家別墅280萬?蘇州橋2居優惠價248萬</a></li>
????????</ul>
????</div>
</div>

?
</body>
</html>