<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>實(shí)踐題?-?選項(xiàng)卡</title>
????<style?type="text/css">
?????/*?CSS樣式制作?*/??
????#container{?width:300px;height:200px;
????????text-align:center;padding-top:0px;position:absolute;
????}
????li{display:block;border-top:1px?solid?#2f2f2f;float:left;
???????height:30px;?width:60px;?padding-top:10px;border-left:1px?solid?#2f2f2f;
???????border-right:1px?solid?#2f2f2f;
???????margin-left:10px;
????}
????ul{
????????position:absolute;px;top:0px;padding-top:0px;margin-top:0px;
????}
????.bottom{
????????border-top:1px?solid?red;height:157px;width:100%;position:absolute;
????????top:41px;
????}
????.top{
????????border-top:1px?solid?red;
????}
????</style>
????<script?type="text/javascript">
?????????
????//?JS實(shí)現(xiàn)選項(xiàng)卡切換
?????var?container?=?document.getElementById("container");
?????alert(container.nodeType);
????</script>
?
</head>
<body>
<!--?HTML頁面布局?-->
<div?id="container">
????<ul>
????????<li?>
????????????房產(chǎn)
????????</li>
????????<li>
????????????家具
????????</li>
????????<li>
????????????二手車
????????</li>
????</ul>
????<div>
????????<p>275萬購昌平鄰鐵三居?總價(jià)20萬買一居
????200萬內(nèi)購五環(huán)三居?140萬安家東三環(huán)
????北京首現(xiàn)零首付樓盤?53萬購東5環(huán)50平
????京樓盤直降5000?中信府?公園樓王現(xiàn)房</p>
????</div>
????<div?style="display:none">
????????<p>40平出租屋大改造?美少女的混搭小窩
?????經(jīng)典清新簡(jiǎn)歐愛家?90平老房煥發(fā)新生
?????新中式的酷色溫情?66平撞色活潑家居
?????瓷磚就像選好老婆?衛(wèi)生間煙道的設(shè)計(jì)</p>
????</div>
????<div?style="display:none">
????????<p>通州豪華3居260萬?二環(huán)稀缺2居250w甩
?????西3環(huán)通透2居290萬?130萬2居限量搶購
?????黃城根小學(xué)學(xué)區(qū)僅260萬?121平70萬拋!
?????獨(dú)家別墅280萬?蘇州橋2居優(yōu)惠價(jià)248萬</p>
????</div>
</div>
?
</body>
</html>
2016-11-06
頁面從上往下在加載，不放下面，加載到j(luò)s的時(shí)候，dom還沒加載呢，自然沒法獲取
2016-11-04
<!DOCTYPE?html> <html> <head> ????<meta?charset="UTF-8"> ????<title>實(shí)踐題?-?選項(xiàng)卡</title> ????<style?type="text/css"> ?????/*?CSS樣式制作?*/?? ????#container{?width:300px;height:200px; ????????text-align:center;padding-top:0px;position:absolute; ????} ????li{display:block;border-top:1px?solid?#2f2f2f;float:left; ???????height:30px;?width:60px;?padding-top:10px;border-left:1px?solid?#2f2f2f; ???????border-right:1px?solid?#2f2f2f; ???????margin-left:10px; ????} ????ul{ ????????position:absolute;px;top:0px;padding-top:0px;margin-top:0px; ????} ????.bottom{ ????????border-top:1px?solid?red;height:157px;width:100%;position:absolute; ????????top:41px; ????} ????.top{ ????????border-top:1px?solid?red; ????} ????</style> ???? ? </head> <body> <!--?HTML頁面布局?--> <div?id="container"> ????<ul> ????????<li?id="1"?style="border:1px?solid?red;"?> ????????????房產(chǎn) ????????</li> ????????<li?id="2"> ????????????家具 ????????</li> ????????<li?id="3"> ????????????二手車 ????????</li> ????</ul> ????<div?id="div1"?> ????????<p>275萬購昌平鄰鐵三居?總價(jià)20萬買一居 ????200萬內(nèi)購五環(huán)三居?140萬安家東三環(huán) ????北京首現(xiàn)零首付樓盤?53萬購東5環(huán)50平 ????京樓盤直降5000?中信府?公園樓王現(xiàn)房</p> ????</div> ????<div?style="display:none"?id="div2"> ????????<p>40平出租屋大改造?美少女的混搭小窩 ?????經(jīng)典清新簡(jiǎn)歐愛家?90平老房煥發(fā)新生 ?????新中式的酷色溫情?66平撞色活潑家居 ?????瓷磚就像選好老婆?衛(wèi)生間煙道的設(shè)計(jì)</p> ????</div> ????<div?style="display:none"?id="div3"> ????????<p>通州豪華3居260萬?二環(huán)稀缺2居250w甩 ?????西3環(huán)通透2居290萬?130萬2居限量搶購 ?????黃城根小學(xué)學(xué)區(qū)僅260萬?121平70萬拋! ?????獨(dú)家別墅280萬?蘇州橋2居優(yōu)惠價(jià)248萬</p> ????</div> </div> ??<script?type="text/javascript"> ????????? ????//?JS實(shí)現(xiàn)選項(xiàng)卡切換 ?????var?container?=?document.getElementsByTagName("li"); ?????for(var?i?=0;i<container.length;i++){ ?????????cssChange(container[i]); ?????} ?????function?cssChange(li){ ??????var?lis?=?document.getElementsByTagName("li"); ?????????li.onclick=function(){ ??????????for(var?i=0;i<lis.length;i++){ ??????????if(lis[i].id==li.id){ ??????????lis[i].style.borderColor="red"; ??????????}else{ ??????????lis[i].style.borderColor="#2f2f2f"; ??????????} ?????????? ??????????} ????????????? ?????????????var?num?=?li.id; ?????????????var?div?=?document.getElementById("div"+num); ?????????????hiddenDiv(div); ?????????} ?????} ????? ????? ?????function?hiddenDiv(div){ ??????var?div1?=?document.getElementById("div1") ??????var?div2?=?document.getElementById("div2"); ??????var?div3?=?document.getElementById("div3"); ??????if(div1.id?==?div.id){ ??????div1.style.display="block"; ??????div2.style.display="none"; ??????div3.style.display="none"; ??????}else?if(div2.id?==?div.id){ ??????div1.style.display="none"; ??????div2.style.display="block"; ??????div3.style.display="none"; ??????}else?if(div3.id?==?div.id){ ??????div1.style.display="none"; ??????div2.style.display="none"; ??????div3.style.display="block"; ??????} ?????} ????</script> </body> </html>最后功能已經(jīng)實(shí)現(xiàn) ? 具體代碼如上 ? 提供給各位參考 ? 具體 為什么 <script></script>代碼塊 ?為什么要放在下面 ?
才能獲取到 代碼塊 ? ? 還需要知道的大神 ?回復(fù)下 謝謝
2016-11-04
剛剛發(fā)現(xiàn) 把?
<script?type="text/javascript">
??????????
????//?JS實(shí)現(xiàn)選項(xiàng)卡切換
?????var?container?=?document.getElementById("container");
?????alert(container.nodeType);
????</script>
這部分代碼 放到最下面 就可行 ? ? ? ? ? ? ?為什么
2016-11-04
通過document.getElementById("container") ?獲取不到 doc對(duì)象 ?不知道為什么 有高人幫忙看看嗎 ? ? 非常感謝