var li=document.getElementById("tab").getElementsByTagName('li'); //var li=oTab.getElementsByTagName('li'); //為什么換這句就不能完成，是因?yàn)閕越界了嗎
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>實(shí)踐題-選項(xiàng)卡2</title>
<style>
/*?
? ? ?標(biāo)簽和文本結(jié)合區(qū)域效果制作：
? ? ?1.用ul做分類標(biāo)簽
? ? ?2.把ul的display定義為block使ul區(qū)域和下面div區(qū)域結(jié)合在一起
? ? ?3.給ul定義一個下邊框或者給div內(nèi)容區(qū)域定義一個上邊框
? ? ?4.所有l(wèi)i標(biāo)簽?zāi)J(rèn)樣式不設(shè)下邊框，作為激活顯示的li標(biāo)簽加寬其#fff（白色）
? ? ?區(qū)域的下邊框，覆蓋。
? ? ?*/??
? ? ?*{margin:0;padding:0;font:normal 12px;font-family:微軟雅黑;color:#000;}
? ? ?a{text-decoration: none;}
? ? ?#tabs{width:300px;height:150px;padding:5px;margin:20px;}
? ? ?#tabs #tab{list-style: none;display:block;height:30px;line-height:30px;}
? ? ?#tabs #tab li{float:left;width:60px;height:28px; line-height: 28px;text-align: center;display:inline-block;margin:0 3px; border:1px solid #aaa; border-bottom: none;cursor:pointer; background:#fff;list-style: none;}
? ? ?#tabs #tab li.on{border-top:2px solid saddlebrown; border-bottom: 2px solid #fff;}
? ? ?#tabs div{height:120px; line-height: 25px; border:1px solid #369; border-top: 2px solid saddlebrown;}
? ? ?#tabs div ul {list-style:none;display:block;}
? ? ?#tabs div ul li{height: 30px; line-height: 30px; text-indent: 8px;}
? ? ?.hide{display: none;}
? ? ?.show{display: block;}
</style>
<script>
window.onload=function(){
var oTab=document.getElementById('tabs');
var li=document.getElementById("tab").getElementsByTagName('li');
//var li=oTab.getElementsByTagName('li'); //為什么換這句就不能完成，是因?yàn)閕越界了嗎
var adiv=oTab.getElementsByTagName('div');
for(var i=0;i<li.length;i++){
li[i].index=i; //定義一個index屬性對li進(jìn)行編號
li[i].onclick=function(){//再注冊一個點(diǎn)擊事件，當(dāng)點(diǎn)擊的時候所有標(biāo)簽都恢復(fù)最初狀態(tài)
for(var n=0;n<li.length;n++){//這步是相對于未被點(diǎn)擊部分的樣式
li[n].className="";
adiv[n].className="hide";
}
this.className="on";// 再對點(diǎn)擊事件添加相應(yīng)的屬性
adiv[this.index].className="";//通過之前的index編號綁定的指定div
}
}
// alert("ok");
}
</script>
</head>
<body>
<!-- HTML頁面布局 -->
<div id="tabs">
? ? <ul id="tab">
? ? ? ? <li class="on">房產(chǎn)</li>
? ? ? ? <li>家居</li>
? ? ? ? <li>二手房</li>
? ? </ul>
? ? <div>
? ? ?<ul>
<li><a href="javascript:;">275萬購昌平鄰鐵三居 總價20萬買一居</a></li>
<li><a href="javascript:;">200萬內(nèi)購五環(huán)三居 140萬安家東三環(huán)</a></li>
<li><a href="javascript:;">北京首現(xiàn)零首付樓盤 53萬購東5環(huán)50平</a></li>
<li><a href="javascript:;">京樓盤直降5000 中信府 公園樓王現(xiàn)房</a></li>
</ul>
? ? </div>
? ? <div class="hide">
? ? ? <ul>
<li><a href="javascript:;">40平出租屋大改造 美少女的混搭小窩</a></li>
<li><a href="javascript:;">經(jīng)典清新簡歐愛家 90平老房煥發(fā)新生</a></li>
<li><a href="javascript:;">新中式的酷色溫情 66平撞色活潑家居</a></li>
<li><a href="javascript:;">瓷磚就像選好老婆 衛(wèi)生間煙道的設(shè)計(jì)</a></li>
</ul>
? ? </div>
? ? <div class="hide">
? ? ? <ul>
<li><a href="javascript:;">通州豪華3居260萬 二環(huán)稀缺2居250w甩</a></li>
<li><a href="javascript:;">西3環(huán)通透2居290萬 130萬2居限量搶購</a></li>
<li><a href="javascript:;">黃城根小學(xué)學(xué)區(qū)僅260萬 121平70萬拋!</a></li>
<li><a href="javascript:;">獨(dú)家別墅280萬 蘇州橋2居優(yōu)惠價248萬</a></li>
</ul>
? ? </div>
</div>
</body>
</html>
2019-07-26
var li = document.getElementById("tab").getElementsByTagName('li');? ? 這句話獲得是
var adiv = oTab.getElementsByTagName('div'); 這句話獲得是
你可以仔細(xì)看你dom結(jié)構(gòu)