為什么沒反應(yīng)??跪求大神幫忙!
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>實(shí)踐題 - 選項(xiàng)卡</title>
? ? <style type="text/css">
? ? ?/* CSS樣式制作 */ ?
? ? ?*{margin:0;padding: 0;}
body{font-family: "微軟雅黑" "arial, helvetica, sans-serif";}
li{list-style: none;}
#table{width:400px;height:200px;margin:50px auto;}
#table .table-title{width: 400px; height: 40px;border-bottom: 2px solid #8B4412;}
#table .table-title li{display:inline-block;float: left;width: 100px;height: 39px;line-height: 41px;border: 1px solid #557FA9;border-bottom:none;text-align:center;margin-left: 10px;}
#table .table-title ?li:hover{cursor: pointer;}
#table .content{width:398px;height:150px;border: 1px solid #557FA9;border-top:none;}
.content ul{padding-top: 10px;padding-left: 10px;}
.content ul li{height: 30px;line-height: 30px;}
#table .table-title ?li.active{border-top: 2px solid #8B4412;border-bottom: 2px solid #FFFFFF;height: 38px;} ?
? ? ? ? ? ?.hidde{display:none;}
? ? </style>
? ? <script type="text/javascript">
? ? ? ? ?
? ? // JS實(shí)現(xiàn)選項(xiàng)卡切換
? ? var li=document.getElementsByTagName("li");
var lots=document.getElementById("table");
? ?var div=lots.getElementsByTagName("div");
for(var i=0;i<li.length;i++){
li[i].index=i;
li[i].onclick=function(){
for(var n=0;n<li.length;n++){
li[n].className="";
div[n].className="hidde";
}
this.className="active";
div[this.index].className="";
}
}?
? ??
? ? </script>
?
</head>
<body>
<!-- HTML頁面布局 -->
<div id="table">
<ul>
<li>房產(chǎn)</li>
<li>家居</li>
<li>二手房</li>
</ul>
<div>
<ul>
? ?<li>275萬購昌平鄰鐵三居 總價(jià)20萬買一居</li>
<li>200萬內(nèi)購五環(huán)三居 140萬安家東三環(huán)</li>
<li>北京首現(xiàn)零首付樓盤 53萬購東5環(huán)50平</li>
<li>京樓盤直降5000 中信府 公園樓王現(xiàn)房</li>
</ul>
</div>
<div class="content hidde">
<ul>
<li> 40平出租屋大改造 美少女的混搭小窩</li>
<li>經(jīng)典清新簡歐愛家 90平老房煥發(fā)新生</li>
<li>新中式的酷色溫情 66平撞色活潑家居</li>
<li> 瓷磚就像選好老婆 衛(wèi)生間煙道的設(shè)計(jì)</li>
</ul>
</div>
<div class="content hidde">
<ul>
<li> 通州豪華3居260萬 二環(huán)稀缺2居250w甩</li>
<li> 西3環(huán)通透2居290萬 130萬2居限量搶購</li>
<li>黃城根小學(xué)學(xué)區(qū)僅260萬 121平70萬拋!</li>
<li>獨(dú)家別墅280萬 蘇州橋2居優(yōu)惠價(jià)248萬</li>
</ul>
</div>
</div>
?
</body>
</html>
2017-07-20
js代碼寫在head前面,并且代碼里面有類似 getElementBy之類的東西 ; ? ??
需要用 window.onload =funciton(){} 把整個(gè)函數(shù)包起來,意味著加載完整個(gè)dom以后再執(zhí)行js代碼。否則js會(huì)在dom加載完之前開始運(yùn)行,dom還沒加載完 ?怎么去從dom里找東西呢?自然就出錯(cuò)了。
如果js寫在body里面 就不需要 window.onload = function(){}; 因?yàn)閎ody里面默認(rèn)是 加載完 整個(gè)dom再執(zhí)行js;
我也是初學(xué)者 ,不知道有沒有什么地方說得不夠嚴(yán)謹(jǐn),僅供參考啦,希望能幫到你;
2017-07-08
css寫不錯(cuò)
但js 代碼前沒有加 ?window.onload= ?,js 代碼后面var的值不知道你做什么.建議用 console.log();方法進(jìn)控制臺(tái)調(diào)試