<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>Title</title>
????<style>
????????*{
????????????margin:?0;
????????????padding:?0;
????????}
????????.box{
????????????width:?400px;
????????????margin:?auto;
????????}
????????#nav{
????????????height:?30px;
????????????width:?400px;
????????????border-bottom:?1px?solid?gray;
????????????display:?block;
????????????border-left:?1px?solid?gray;
????????}
????????#nav?li{
????????????float:?left;
????????????padding:?0?30px;
????????????border:?1px?solid?gray;
????????????border-bottom:?none;
????????????border-left:?none;
????????????line-height:?29px;
????????????cursor:?pointer;
????????}
????????ul{
????????????margin:?0;
????????????padding:?0;
????????????list-style:?none;
????????}
????????#section?li{
????????????border:?1px?solid?gray;
????????????padding:?20px;
????????????height:?300px;
????????????border-top:?none;
????????????display:?none;
????????}
????????#nav?li.current{
????????????background-color:?#bebebe;
????????????height:?30px;
????????}
????????#section?li.current{
????????????display:?block;
????????}
????</style>
</head>
<body>
<div?class="box">
????<div?id="nav">
????????<ul>
????????????<li?class="current">房產(chǎn)</li>
????????????<li>家居</li>
????????????<li>二手房</li>
????????</ul>
????</div>
????<div?id="section">
????????<ul>
????????????<li?class="current">
???????????275萬購昌平鄰鐵三居?總價20萬買一居<br/>
???????????200萬內(nèi)購五環(huán)三居?140萬安家東三環(huán)<br/>
???????????北京首現(xiàn)零首付樓盤?53萬購東5環(huán)50平<br/>
???????????京樓盤直降5000?中信府?公園樓王現(xiàn)房<br/>
????????????</li>
????????????<li>
????????????????40平出租屋大改造?美少女的混搭小窩<br/>
????????????????經(jīng)典清新簡歐愛家?90平老房煥發(fā)新生<br/>
????????????????新中式的酷色溫情?66平撞色活潑家居<br/>
????????????????瓷磚就像選好老婆?衛(wèi)生間煙道的設(shè)計<br/>
????????????</li>
????????????<li>
????????????????通州豪華3居260萬?二環(huán)稀缺2居250w甩<br/>
????????????????西3環(huán)通透2居290萬?130萬2居限量搶購<br/>
????????????????黃城根小學(xué)學(xué)區(qū)僅260萬?121平70萬拋!<br/>
????????????????獨家別墅280萬?蘇州橋2居優(yōu)惠價248萬<br/>
????????????</li>
????????</ul>
????</div>
</div>
<script>
????window.onload?=?function(){
????????var?nav=document.getElementById("nav");
????????var?navLi=nav.getElementsByTagName("li");
????????var?section=document.getElementById("section");
????????var?sectionLi=section.getElementsByTagName("li");
????????for(var?i=0;i<navLi.length;i++){
????????????navLi[i].index=i;
????????????navLi[i].onclick=function(){
????????????????for(var?n?=0;n<navLi.length;n++){
????????????????????navLi[n].className="";
????????????????????sectionLi[n].className="li";
????????????????}
????????????????this.className="current";
????????????????sectionLi[this.index].className="current";
????????????}
????????}
????}
</script>
</body>
</html>
2019-05-29
for(var?n?=0;n<navLi.length;n++){ ????????navLi[n].className=""; ????????sectionLi[n].className="li"; } 請問這幾行是什么意思?這里有點看不明白2019-03-17
在我寫的時候發(fā)現(xiàn)document.getElementsByClassName()這個方法不可用，所以只能把nav和section改為id屬性，沒有調(diào)試出來為什么。其他沒有什么大問題