li[i].index =i; index这个东西没太懂 和 整个div[this.index]

Question

window.onload=function(){

  var tab = document.getElementById("tab-list");

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

  var div = tab.getElementsByTagName("div");

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

    li[i].index = i;

li[i].onmouseover = function(){

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

   li[i].className="";

 }

 this.className = "active"; 

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

div[j].className="hide";

 }

 div[this.index].className = "show";

}

  }

}

  问题：  该怎么理解div[this.index]         例如点击的是第一个li 就是 div[li[0].index]是吧？    index属性不懂

 div[0]指的是div数组第一个div   但是 div[this.index] 是什么鬼 怎么理解this.index 例如指第一个li    div[li[0].index]  

绕死我了。 

Answer 1

li是一个对象，index是他的属性，在最开始已经赋值了。所以li[0].index的值为0. for(var i=0;i<li.length;i++){    li[i].index = i;}这里赋值的。div[li[0].index]简化一下就是div[0]div[this.index]是什么意思呢。看看这个li[i].onmouseover这里this指的什么this就是当前的li啊。所以这里的this.index并不是指第一个li而是指你点击的li。你点击第三个，那就是第三个li，第二个就是第二个li。当然如果你正好点击的第一个，那就是第一个li罗。