關(guān)于oLis[i].index = i;和oDivs[this.index].className = "";
為什么要用oLis[i].index = i;?oLis[i].index和i的值在循環(huán)過程中一直保持一致的啊,為什么還要寫這樣一條語句
oDivs[this.index].className = "";是清除上面那個for循環(huán)里賦給它的"hide"還是恢復(fù)原來的樣式
this和this.index指的事對應(yīng)的for循環(huán)里的oLis[i]嗎
<!DOCTYPE?html> <html> <head> ????<meta?charset="UTF-8"> ????<title>實(shí)踐題?-?選項(xiàng)卡</title> ????<style?type="text/css"> ????????*{padding:0px;margin:?0px;font:12px?normal?"microsoft?yahei";} ????????#tabs?{width:290px;padding:5px;height:150px;margin:20px;} ????????#tabs?ul{list-style:none;display:?block;height:30px;line-height:30px;border-bottom:2px?saddlebrown?solid;} ????????#tabs?ul?li{background:#fff;cursor:pointer;float:left;list-style:none;height:28px;line-height:28px;margin:0px?3px;border:1px?solid?#aaaaaa;border-bottom:none;display:inline-block;width:60px;text-align:?center;} ????????#tabs?ul?li.on{border-top:2px?solid?saddlebrown;border-bottom:?2px?solid?#fff;} ????????#tabs?div{height:120px;line-height:?25px;border:1px?solid?#336699;border-top:none;padding:5px;} ????????.hide{display:?none;} ????</style> ????<script?type="text/javascript"> ?????????window.onload?=?function(){ ?????????????var?oTab?=?document.getElementById("tabs"); ?????????????var?oUl?=?oTab.getElementsByTagName("ul")[0]; ?????????????var?oLis?=?oUl.getElementsByTagName("li"); ?????????????var?oDivs=?oTab.getElementsByTagName("div"); ?????????????for(var?i=?0,len?=?oLis.length;i<len;i++){ ?????????????????oLis[i].index?=?i; ?????????????????oLis[i].onclick?=?function()?{ ?????????????????????for(var?n=?0;n<len;n++){ ?????????????????????????oLis[n].className?=?""; ?????????????????????????oDivs[n].className?=?"hide"; ?????????????????????} ?????????????????????this.className?=?"on"; ?????????????????????oDivs[this.index].className?=?""; ?????????????????} ?????????????}; ?????????} ????</script> </head> <body> <div?id="tabs"> ????<ul> ????????<li>房產(chǎn)</li> ????????<li>家居</li> ????????<li>二手房</li> ????</ul> ????<div> ????????275萬購昌平鄰鐵三居?總價20萬買一居<br> ????????200萬內(nèi)購五環(huán)三居?140萬安家東三環(huán)<br> ????????北京首現(xiàn)零首付樓盤?53萬購東5環(huán)50平<br> ????????京樓盤直降5000?中信府?公園樓王現(xiàn)房<br> ????</div> ????<div> ????????40平出租屋大改造?美少女的混搭小窩<br> ????????經(jīng)典清新簡歐愛家?90平老房煥發(fā)新生<br> ????????新中式的酷色溫情?66平撞色活潑家居<br> ????????瓷磚就像選好老婆?衛(wèi)生間煙道的設(shè)計<br> ????</div> ????<div> ????????通州豪華3居260萬?二環(huán)稀缺2居250w甩<br> ????????西3環(huán)通透2居290萬?130萬2居限量搶購<br> ????????黃城根小學(xué)學(xué)區(qū)僅260萬?121平70萬拋!<br> ????????獨(dú)家別墅280萬?蘇州橋2居優(yōu)惠價248萬<br> ????</div> </div> </body> </html>
2017-08-25
index你可以理解成是你自己定義的一個變量, 而i的值并沒有什么變化而是oLis.length;你可以這樣理解,for只是把最后一個len?=?oLis.length;i<len; ?只是這句話 ,并沒有保存其他的值,這個時候用index來記錄一下遍歷的次數(shù),
?oLis[n].className?=?"";?=?""!?=?""! ? 等于空的字符串,
this的數(shù)據(jù)類型是obj,是個對象!是當(dāng)前對象!而this.inedx值得是當(dāng)前對象的下標(biāo)【i】;
2016-03-16
指的是你點(diǎn)擊的li對應(yīng)的在數(shù)組中的編號
2016-03-16
oDivs[this.index].className = "";是清除上面那個for循環(huán)里賦給它的"hide",你點(diǎn)擊那項(xiàng)對應(yīng)的內(nèi)容就出現(xiàn)了
2016-03-15
oLis[i].index = i是先通過index給菜單欄的三項(xiàng)編號,比如你點(diǎn)擊菜單欄第二項(xiàng) 那么就要通過this.index來得到此時點(diǎn)擊的是第2個菜單項(xiàng) 然后通過oDivs[this.index]來設(shè)置它的className