this.className = "active"和aLi[i].className = "active";的區(qū)別
<!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?#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實(shí)現(xiàn)選項(xiàng)卡切換
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;不加不會(huì)顯示
//?this.className?=?"active";tab[i].className?=?"active";區(qū)別
????</script>
?
</head>
<body>
<!--?HTML頁面布局?-->
<div?id="tab-list">
????<ul?id="ul1">
????????<li?id="tag1"?onclick="fc()">房產(chǎn)</li><li?id="tag2"?onclick="jj()">家居</li?id="tag3"?onclick="esf()"><li>二手房</li>
????</ul>
????<div?id="first">
????????<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?id="second">
????????<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?id="third">
????????<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>有2個(gè)問題
this.className = "active"換成aLi[i].className = "active";為什么就沒有用。
aLi[i].index = i;不加，把aDiv[this.index].className = "show";換成aDiv[i].className = "show"就沒有用。
~~~~~~~~~~~~~~~~~~~求大神~~~~~~~~~~~~~~~~~~~
2016-11-30
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].onclick = function(){
for(var i=0;i<aLi.length;i++){
aLi[i].className = "";
aDiv[i].className = "hide";
}
alert(i);
//aLi[i].className = "active";
//aDiv[aLi[i].index].className = "show";
}
}
}
你這樣顯示一下i，無論怎樣都是3，因?yàn)榻?jīng)過了for循環(huán)，而aLi[i]=aLi[3]是不存在的，所以有問題。
而this值得是onclick前面的那個(gè)aLi[i]；
至于index的作用按著這個(gè)理解就是用來同步卻換的。