關(guān)于index問(wèn)題。求指教
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的選項(xiàng)卡</title>
<style type="text/css">
*{margin:0;padding:0;}
#box
{
width:275px;
height:220px;
margin:22px auto;
font-family:"微軟雅黑";
font-size:15px;
overflow:hidden;
}
ul
{
border-bottom:2px solid red;
height:30px;
}
li
{
list-style-type:none;
? ? float:left;
width:80px;
line-height:30px;
border-top:2px solid #999;
border-left:1px solid #999;
border-right:1px solid #999;
text-align:center;
margin-left:6px;
}
a
{
text-decoration:none;
color:#000;
display:block;
line-height:30px;
text-align:center;
? ??
}
.show
{
clear:both;
border-left:1px solid #999;
border-right:1px solid #999;
border-bottom:1px solid #999;
background: #FFC ;
}?
.active
{
background: #ffc;
border-top:2px solid red;
}
.hide
{
display:none;
}
</style>
<script type="text/javascript">
window.onload=function(){
var Head=document.getElementById("head");
? ?var Lists=Head.getElementsByTagName("li") ;
? ?var Box=document.getElementById("box");?
? ?var oDiv=Box.getElementsByTagName("div") ;?
? ?
? ?for(var i=0;i<Lists.length;i++)
? ?{
? Lists[i].index = i;/*這一句和后面? oDiv[this.index].className = "show"; 有什么關(guān)系？為什我去掉Lists[i].index = i這一句話，oDiv[this.index].className = "show";這句話就失效了？？*/
? Lists[i].onmouseover=function()
? {
?for(var i=0;i<Lists.length;i++)
?{
Lists[i].className=""; ?
?}
?this.className="active";
?
?
?for(var j=0;j<oDiv.length;j++)
?{
?oDiv[j].className="hide";?
?}
? ? ? ? ? oDiv[this.index].className = "show";?
? } ?
? ?}
? ?
}
</script>
</head>
<body>
<div id="box">
? ? <ul id="head">
? ? ? ? <li ?class="active">房產(chǎn)</li>
? ? ? ? <li>家居</li>
? ? ? ? <li>二手房</li>
? ? </ul> ? ?
? ? ?<div class="show">
? ? ? ? <a href="#">275萬(wàn)購(gòu)昌平鄰鐵三居 總價(jià)20萬(wàn)買(mǎi)一居</a>
? ? ? ? <a href="#">200萬(wàn)內(nèi)購(gòu)五環(huán)三居 140萬(wàn)安家東三環(huán)</a>
? ? ? ? <a href="#">北京首現(xiàn)零首付樓盤(pán) 53萬(wàn)購(gòu)東5環(huán)50平</a>
? ? ? ? <a href="#">京樓盤(pán)直降00 50中信府 公園樓王現(xiàn)房</a>
? ? ?</div>
??
? ? ?<div class="hide">
? ? ? ? <a href="#">京樓盤(pán)直降5000 中信府 公園樓王現(xiàn)房</a>
? ? ? ? <a href="#">200萬(wàn)內(nèi)購(gòu)五環(huán)三居 140萬(wàn)安家東三環(huán)</a>
? ? ? ? <a href="#">北京首現(xiàn)零首付樓盤(pán) 53萬(wàn)購(gòu)東5環(huán)50平</a>
? ? ? ? <a href="#">275萬(wàn)購(gòu)昌平鄰鐵三居 總價(jià)2一居0萬(wàn)買(mǎi)</a>?
? ? ?</div>?
??
? ? ?<div class="hide">
? ? ? ? <a href="#">北京首現(xiàn)零首付樓盤(pán) 53萬(wàn)購(gòu)東5環(huán)50平</a>
? ? ? ? <a href="#">200萬(wàn)內(nèi)購(gòu)五環(huán)三居 140萬(wàn)安家東三環(huán)</a>
? ? ? ? <a href="#">275萬(wàn)購(gòu)昌平鄰鐵三居 總價(jià)20萬(wàn)買(mǎi)一居</a>
? ? ? ? <a href="#">京樓盤(pán)直降5000 中信府 公園樓王現(xiàn)房</a>
? ? ?</div> ??
? ?
</div>
</body>
</html>
2016-05-12
建議看看這個(gè)，閉包的原因：http://www.cnblogs.com/songjum/p/4545800.html
注意運(yùn)用閉包的常見(jiàn)錯(cuò)誤-->for（var i，len=xx.length;i<len;i++）循環(huán)；當(dāng)我們所引用的自由變量為i時(shí),由于i一直在內(nèi)存中沒(méi)有釋放，所以函數(shù)每次alert（i）時(shí)，其值均為最終的i；