請(qǐng)教一下大神！
<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>實(shí)踐題?-?選項(xiàng)卡</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>房產(chǎn)</li><li>家居</li><li>二手房</li>
????</ul>
????<div>
????????<ul>
????????????<li><a?href="javascript:;">275萬購昌平鄰鐵三居?總價(jià)20萬買一居</a></li>
????????????<li><a?href="javascript:;">200萬內(nèi)購五環(huán)三居?140萬安家東三環(huán)</a></li>
????????????<li><a?href="javascript:;">北京首現(xiàn)零首付樓盤?53萬購東5環(huán)50平</a></li>
????????????<li><a?href="javascript:;">京樓盤直降5000?中信府?公園樓王現(xiàn)房</a></li>
????????</ul>
????</div>????
????<div>
????????<ul>
????????????<li><a?href="javascript:;">40平出租屋大改造?美少女的混搭小窩</a></li>
????????????<li><a?href="javascript:;">經(jīng)典清新簡歐愛家?90平老房煥發(fā)新生</a></li>
????????????<li><a?href="javascript:;">新中式的酷色溫情?66平撞色活潑家居</a></li>
????????????<li><a?href="javascript:;">瓷磚就像選好老婆?衛(wèi)生間煙道的設(shè)計(jì)</a></li>
????????</ul>
????</div>????
????<div>
????????<ul>
????????????<li><a?href="javascript:;">通州豪華3居260萬?二環(huán)稀缺2居250w甩</a></li>
????????????<li><a?href="javascript:;">西3環(huán)通透2居290萬?130萬2居限量搶購</a></li>
????????????<li><a?href="javascript:;">黃城根小學(xué)學(xué)區(qū)僅260萬?121平70萬拋!</a></li>
????????????<li><a?href="javascript:;">獨(dú)家別墅280萬?蘇州橋2居優(yōu)惠價(jià)248萬</a></li>
????????</ul>
????</div>
</div>
?
</body>
</html>我就想問下
aLi[i].className?=?"" this.className?=?"active" aDiv[this.index].className?=?"show"
這三個(gè)代碼 將className的值分別設(shè)為空，active，show。這樣做的意義何在？
請(qǐng)大神教一下，感謝！
2016-01-03
首先，你注意到上面的CSS樣式中的“show”,"active","hide"了嗎？上面的三行代碼都是在，為元素動(dòng)態(tài)添加CSS樣式，或把元素的CSS樣式清空，本來是靜態(tài)的CSS代碼，當(dāng)和JavaScript結(jié)合起來，就可以動(dòng)態(tài)的為元素添加我們想要的CSS樣式了。
其次，就是一下，那三行代碼的作用，以及在文檔中的效果：
第一、二行代碼，作用清空所有id為ul1的樣式，也就是其class屬性，使用開發(fā)者工具可以看到具體的效果，當(dāng)你進(jìn)行切換標(biāo)簽時(shí)：
原來的：
切換時(shí)的：
第三行代碼，作用是，顯示div或隱藏div，用到的css樣式：
.show{display:?block;}.hide{display:?none;}具體的效果是：
看到div中的class屬性的值了嗎？那都是通過JavaScript動(dòng)態(tài)添加的！
2016-01-04
回復(fù) 小小小小小小童鞋：嗯嗯 ，你說的我大概懂了。不過我發(fā)現(xiàn)個(gè)東西，就是我把a(bǔ)Li[i].index = i;這個(gè)去掉以后，然后運(yùn)行這個(gè)代碼，你會(huì)發(fā)現(xiàn)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";
? ? ? ? ? ? ? ? }
這一大段代碼都會(huì)執(zhí)行，而唯獨(dú)aDiv[this.index].className = "show"這段代碼沒有執(zhí)行