不理解这里的lis[i].index=i;

来源:10-1 编程挑战

lc_逃之夭夭

2016-10-21 10:13

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>实践题 - 选项卡</title>

<style type="text/css">

* {

margin: 0;

padding: 0;

}


#tabs {

width: 300px;

}


ul {

display: block;

width: 298px;

border: 1px solid red;

height: 20px;

background: #eee;

}


li {

float: left;

display: inline-block;

width: 97px;

border: 1px solid green;

}


.hide {

display: none;

}


.on {

background: white;

}

</style>

</head>


<body>

<!-- HTML页面布局 -->

<ul>

<li>房产</li>

<li>家居</li>

<li>二手房</li>

</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>

<script>

    window.onload=function(){

    var lis =document.getElementsByTagName('li');

    var divs =document.getElementsByTagName('div');

    for(var i = 0;i<lis.length;i++){

        lis[i].index=i;

        lis[i].onclick=function(){

          for(var i =0;i<lis.length;i++){

            lis[i].className='';

          }

          this.className='on';      

          for(var j=0;j<divs.length;j++){

            divs[j].className='hide';

          }

          divs[this.index].className='';    

          } 

    }    

    }

</script>


</body>


</html>

代码如上,这里为什么要用lis[i].index=i呢?,还有这里的divs[this.index]也不是很明白为什么要这么写

写回答 关注

1回答

  • Shero_25
    2016-10-21 11:23:56
    已采纳

    index表示的是对应的索引位置  lis[i].index=i循环把i的值赋值给li的index;this.index表示当前点击的li的索引值 divs[this.index]表示对应的DIV

    炒焗焖煎煮 回复qq_谜离_...

    for(var i = 0;i<lis.length;i++) 先跑完这里,i最后变成了lis.length的值,可以用alert去验证一下i的值。用index(索引值)这样的好处就是你可以随时操作数组的某一个元素,直接用lis[index]去引用位置上的元素就可以了,不需要再写一个for循环去遍历一遍。

    2017-09-21 09:45:30

    共 3 条回复 >

JavaScript进阶篇

本课程从如何插入JS代码开始,带您进入网页动态交互世界

468192 学习 · 21891 问题

查看课程

相似问题