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

this.className = "active"和aLi[i].className = "active";的區別

<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>實踐題?-?選項卡</title>
????<style?type="text/css">
?????/*?CSS樣式制作?*/??
*{margin:0;padding:0;font:normal?12px?"微軟雅黑";color:#000000;}
ul{list-style-type:?none;}
????a{text-decoration:?none;}

#tab-list{width:?275px;height:190px;margin:?20px?auto;}
????#ul1{border-bottom:?2px?solid?#842;height:?32px;}
/*#ul1?li{margin-left:5px;padding:0?10px;float:left;line-height:30px;border:1px?solid?#bbf;}*/
????#ul1?li{display:?inline-block;width:?60px;line-height:?30px;text-align:?center;border:?1px?solid?#999;border-bottom:?none;margin-left:?5px;}
#ul1?li:hover{cursor:?pointer;}
#ul1?li.active{border-top:2px?solid?#900;border-bottom:2px?solid?#FFFFFF;}

????#tab-list?div{border:1px?solid?#bbf;height:150px;border-top:none;}
#tab-list?div?li{height:30px;line-height:30px;text-indent:8px}
.show{display:?block;}.hide{display:none}
????</style>
????<script?type="text/javascript">
?????????
????//?JS實現選項卡切換
window.onload?=?function(){
var?aLi?=?document.getElementById("ul1").getElementsByTagName("li");
var?aDiv?=?document.getElementById("tab-list").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?=?"";
aDiv[i].className?=?"hide";
}
this.className?=?"active";
aDiv[this.index].className?=?"show";
}
}
}
//??aLi[i].index?=?i;不加不會顯示
//?this.className?=?"active";tab[i].className?=?"active";區別

????</script>
?
</head>
<body>
<!--?HTML頁面布局?-->
<div?id="tab-list">
????<ul?id="ul1">
????????<li?id="tag1"?onclick="fc()">房產</li><li?id="tag2"?onclick="jj()">家居</li?id="tag3"?onclick="esf()"><li>二手房</li>
????</ul>
????<div?id="first">
????????<ul>
????????????<li><a?href="javascript:;">275萬購昌平鄰鐵三居?總價20萬買一居</a></li>
????????????<li><a?href="javascript:;">200萬內購五環三居?140萬安家東三環</a></li>
????????????<li><a?href="javascript:;">北京首現零首付樓盤?53萬購東5環50平</a></li>
????????????<li><a?href="javascript:;">京樓盤直降5000?中信府?公園樓王現房</a></li>
????????</ul>
????</div>
????<div?id="second">
????????<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?id="third">
????????<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>

有2個問題

this.className = "active"換成aLi[i].className = "active";為什么就沒有用。
aLi[i].index = i;不加，把aDiv[this.index].className = "show";換成aDiv[i].className = "show"就沒有用。

~~~~~~~~~~~~~~~~~~~求大神~~~~~~~~~~~~~~~~~~~