                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

求教:script里到底哪里错了呢?另外里边那个for循环有什么意义呢?

<!DOCTYPE html>

<html>

<head>

*{margin:0;padding:0;font:12px normal "微软雅黑";}

#san{

width: 290px;

height: 150px;

margin: 20px;

padding: 5px;

}

#san ul{

list-style: none;

height: 30px;

line-height: 30px;

border-bottom: 2px green solid;

}

#san ul li{

background: #fff;

cursor: pointer;

height: 28px;

line-height: 30px;

display: inline-blcok;

float: left;

margin: 0 3px;

border: 1px red solid;

border-bottom: none;

width: 60px;

text-align: center;

}

#san ul li.on{

border-top: 2px green solid;

border-bottom: 2px #fff solid;

}

#san div{

height: 120px;

line-height: 25px;

border: 1px blue solid;

border-top: none;

padding: 5px;

}

.hide{

display: none;

}

</style>

window.onload=function(){

var san= document.getElementById("san");

var oul= document.getElementsByTagName("ul")[0];

var oli= document.getElementsByTagName("li");

var odiv= document.getElementsByTagName("div");

for(i= 0,l= oli.length; i<l; i++){

oli[i].index= i;

oli[i].onclick= function(){

for(var n= 0;n<l;n++){

oli[n].className = "";

odiv[n].className = "hide";

}

this.className = "on";

odiv[this.index].className = "";

}

};

}

</script>

</head>

<body>

<ul>

</ul>

<div>275万购昌平邻铁三居总价20万买一居<br>

200万内购五环三居 140万安家东三环<br>

北京首现零首付楼盘 53万购东5环50平<br>

京楼盘直降5000 中信府公园楼王现房<br>

</div>

<div>

40平出租屋大改造美少女的混搭小窝<br>

经典清新简欧爱家 90平老房焕发新生<br>

新中式的酷色温情 66平撞色活泼家居<br>

瓷砖就像选好老婆卫生间烟道的设计<br>

</div>

<div>

通州豪华3居260万二环稀缺2居250w甩<br>

西3环通透2居290万 130万2居限量抢购<br>

黄城根小学学区仅260万 121平70万抛!<br>

独家别墅280万苏州桥2居优惠价248万<br>

</div>

</body>

</html>

逃离星球

2016-04-07

源自：JavaScript进阶篇 10-1

关注问题我要回答

829

操作

收起

3 回答

深山小童
2016-04-10

里边的for循环是先将所有的状态清除（恢复）

0 回复有任何疑惑可以回复我~

收起回答

best灬翔
2016-04-07

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>房产家居</title>
  <style type="text/css">
     *{margin:0;padding:0;font:12px normal "微软雅黑";}
    
    body{
      padding-top: 5px;	
     padding-left: 5px;
    }
    
    ul{
       list-style: none;
       height: 30px;
       line-height: 30px;
       margin-bottom: -1px;
     }
     ul li{
      background: #fff;
      cursor: pointer;
      height: 28px;
      line-height: 30px;
      display: inline-blcok;
      float: left;
      margin: 0px 3px;
      border: 1px red solid;
      border-bottom: none;
      width: 60px;
      text-align: center;
     }
   ul li.on{
      border-top: 2px green solid;
      border-bottom: 2px #fff solid;
    }
    div{
      width: 260px;
      line-height: 25px;
      border: 1px blue solid;
      border-top: 2px solid red;
      padding: 5px;
      display: none;
    }
    .on{
      display: block;
    }
  </style>

  <script type="text/javascript">
     window.onload=function(){
      var oul= document.getElementsByTagName("ul")[0];
      var oli= document.getElementsByTagName("li");
      var odiv= document.getElementsByTagName("div");
      var l = oli.length;//拿到所有li标签的长度数量，用来做遍历
      var d = odiv.length;//拿到所有div标签的长度数量，用来做遍历
      for(i= 0; i<l; i++){
        oli[i].index= i;//拿到当前点击的li标签下标
        oli[i].onclick= function(){
        	//清空所有li标签的class
            for(var n= 0;n<l;n++){
                  oli[n].className = "";               
            }
            //清空所有div标签的class
            for(var n=0;n<d;n++){
            	odiv[n].className = "";
            }
            //重新给选中的li标签以及对应的div标签设置样式
            this.className = "on";
            odiv[this.index].className = "on";
        }
      };        
    }
  </script>
</head>

<body>
    <ul>
      <li class="on">房产</li>
      <li>家居</li>
      <li>二手房</li>
    </ul>
    <div class="on">275万购昌平邻铁三居 总价20万买一居<br>
        200万内购五环三居 140万安家东三环<br>
        北京首现零首付楼盘 53万购东5环50平<br>
        京楼盘直降5000 中信府 公园楼王现房<br>
    </div>
    <div>
        40平出租屋大改造 美少女的混搭小窝<br>
        经典清新简欧爱家 90平老房焕发新生<br>
        新中式的酷色温情 66平撞色活泼家居<br>
        瓷砖就像选好老婆 卫生间烟道的设计<br>
    </div>
    <div>
        通州豪华3居260万 二环稀缺2居250w甩<br>
        西3环通透2居290万 130万2居限量抢购<br>
        黄城根小学学区仅260万 121平70万抛!<br>
        独家别墅280万 苏州桥2居优惠价248万<br>
    </div>
    
</body>
</html>

这个是我修改之后的代码，script部分做了解释，应该能看懂。