請教一下大神！
<!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?#8B4513;height:?32px;}
?????#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?#8B4513;border-bottom:2px?solid?#FFFFFF;}
?????#tab-list?div{border:?1px?solid?#7396B8;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">
?????????
????window.onload?=?function()?{
????????var?oUl1?=?document.getElementById("ul1");
????????var?aLi?=?oUl1.getElementsByTagName("li");
????????var?oDiv?=?document.getElementById("tab-list");
????????var?aDiv?=?oDiv.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].className?=?"show";
????????????}????????
????????}
????}
????
????
????</script>
?
</head>
<body>
<!--?HTML頁面布局?-->
<div?id="tab-list">
????<ul?id="ul1">
????????<li>房產</li><li>家居</li><li>二手房</li>
????</ul>
????<div>
????????<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>
????????<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>我就想問下
aLi[i].className?=?"" this.className?=?"active" aDiv[this.index].className?=?"show"
這三個代碼 將className的值分別設為空，active，show。這樣做的意義何在？
請大神教一下，感謝！
2016-01-03
首先，你注意到上面的CSS樣式中的“show”,"active","hide"了嗎？上面的三行代碼都是在，為元素動態添加CSS樣式，或把元素的CSS樣式清空，本來是靜態的CSS代碼，當和JavaScript結合起來，就可以動態的為元素添加我們想要的CSS樣式了。
其次，就是一下，那三行代碼的作用，以及在文檔中的效果：
第一、二行代碼，作用清空所有id為ul1的樣式，也就是其class屬性，使用開發者工具可以看到具體的效果，當你進行切換標簽時：
原來的：
切換時的：
第三行代碼，作用是，顯示div或隱藏div，用到的css樣式：
.show{display:?block;}.hide{display:?none;}具體的效果是：
看到div中的class屬性的值了嗎？那都是通過JavaScript動態添加的！
2016-01-04
回復 小小小小小小童鞋：嗯嗯 ，你說的我大概懂了。不過我發現個東西，就是我把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].className = "show"這段代碼沒有執行