10-1編程挑戰(zhàn)。js部分，有什么問題，為什么不實(shí)現(xiàn)選項(xiàng)卡變換效果
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>實(shí)踐題 - 選項(xiàng)卡</title>
? ? <style type="text/css">
? ? ?/* CSS樣式制作 */ ?
? ? ? ?*{
? ? ? ? ? ?margin:0;
? ? ? ? ? ?padding:0;
? ? ? ? ? ?font-family:"微軟雅黑";
? ? ? ?}
? ? ? ?#content{
? ? ? ? ? ?height:600px;
? ? ? ? ? ?width:600px;
?position:absolute;
?top:50px;
?left:50%;
?margin-left:-200px;
? ? ? ?}
? ? ? ?ul{
? ? ? ? ? ?position:absolute;
? ? ? ? ? ?margin-left:10px;
? ? ? ? ? ?z-index:100;
? ? ? ?}
? ? ? ?ul li{
? ? ? ? ? ?list-style:none;
? ? ? ? ? ?font-size:20px;
? ? ? ? ? ?height:40px;
? ? ? ? ? ?width:100px;
? ? ? ? ? ?line-height:40px;
? ? ? ? ? ?text-align:center;
? ? ? ? ? ?border:2px solid gray;
? ? ? ? ? ?display:inline-block;
? border-bottom:none;
??
? ? ? ?}
? ? ? ?div div{
? ? ? ? ? ?border:2px solid blue;
? border-top:4px solid #cc9900;
? display:none;
? ? ? ? ? ?position:absolute;
? top:44px;
? ? ? ? ? ?height:150px;
? ? ? ? ? ?width:400px;
? padding:10px 15px 10px 10px;
? font-size:18px;
? ? ? ?}
? ul .selected{
border-top:4px solid #cc9900;
border-bottom:4px solid white;
? }
? ? ? ?div .selected{
display:inline-block;
? }
? ? </style>
? ? <script type="text/javascript">
? ? ? ? ?// JS實(shí)現(xiàn)選項(xiàng)卡切換
??
//選項(xiàng)卡實(shí)現(xiàn)思路
//第一步：
//鼠標(biāo)滑倒某一個(gè)li上，先讓所有l(wèi)i都沒有select樣式，然后再讓當(dāng)前l(fā)i有select樣式
//第二步：要操作誰(shuí)就線獲取誰(shuí)
var div1=document.getElementById("content");
var lis=div1.getElementsByTagName("li");
var divs=div1.getElementsByTagName("div");
//第三步：給我們的li綁定鼠標(biāo)移上去的事件
for(i=0;i<lis.length;i++){
lis[i].k=i;
lis[i].onmouseover=function(){
changecolor(this.k);
}
}
//第四步：制定一個(gè)功能方法，實(shí)現(xiàn)我們的需求
//nIndex是我們定義形參，代表當(dāng)前被選擇的元素索引
function changecolor(k){
for(var j=0;j<lis.length;j++){
lis[j].className="";
divs[j].className="";
}
lis[k].className="selected";
divs[k].className="selected";
}
? ? </script>
?
</head>
<body>
<!-- HTML頁(yè)面布局 -->
<div id="content">
? ? <ul>
? ? ? ? <li>房產(chǎn)</li>
? ? ? ? <li>家居</li>
? ? ? ? <li>二手房</li>
? ? </ul>
? ? <div>275萬(wàn)購(gòu)昌平鄰鐵三居 總價(jià)20萬(wàn)買一居<br/>
? ? 200萬(wàn)內(nèi)購(gòu)五環(huán)三居 140萬(wàn)安家東三環(huán)<br/>
? ? 北京首現(xiàn)零首付樓盤 53萬(wàn)購(gòu)東5環(huán)50平<br/>
? ? 京樓盤直降5000 中信府 公園樓王現(xiàn)房</div>
? ? <div> 40平出租屋大改造 美少女的混搭小窩<br/>
? ? ?經(jīng)典清新簡(jiǎn)歐愛家 90平老房煥發(fā)新生<br/>
? ? ?新中式的酷色溫情 66平撞色活潑家居<br/>
? ? ?瓷磚就像選好老婆 衛(wèi)生間煙道的設(shè)計(jì)</div>
? ? <div> ?通州豪華3居260萬(wàn) 二環(huán)稀缺2居250w甩<br/>
? ? ?西3環(huán)通透2居290萬(wàn) 130萬(wàn)2居限量搶購(gòu)<br/>
? ? ?黃城根小學(xué)學(xué)區(qū)僅260萬(wàn) 121平70萬(wàn)拋!<br/>
? ? ?獨(dú)家別墅280萬(wàn) 蘇州橋2居優(yōu)惠價(jià)248萬(wàn)</div>
</div>
?
</body>
</html>
2017-05-29
因?yàn)樵诩虞dvar lis=div1.getElementsByTagName("li");時(shí)，瀏覽器還未加載到li標(biāo)簽，所以li是未定義的，只要把js部分放在瀏覽器加載完頁(yè)面后加載即可正常實(shí)現(xiàn)“window.onload可實(shí)現(xiàn)此功能”