<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.page{border: 1px red solid;}
.up{width:300px;height:50px;}
.a{width:90px;height:50px;float: left;border: 1px pink solid;}
.down1{width:300px;height:200px;border:1px black solid;padding-top: 10px;}
</style>
</head>
<script>
window.onload=function(){
var up=document.getElementsByClassName("a")
var down=document.getElementsByClassName("down1")
console.log(down)
for(var i in up){
up[i].index=i;
down[i].index=i up[i].onmouseover=function(){
//this.style.background="skyblue" console.log(this.index)
for(var j=0;j<down.length;j++){
console.log(down[j].index)
if((this.index)==(down[j].index)){ down[j].style.background="skyblue" } }
}
} } </script>
<body>
<div class="page" style="width: 300px;height:300px;">
<div class="up" id="up">
<div class="a">aaa</div>
<div class="a">bbb</div>
<div class="a">ccc</div>
</div>
<div class="down1" style="display: block;" >qqq</div>
<div class="down1" style="display: none;">www</div>
<div class="down1" style="display: none;">eee</div> </div>
</body>
</html>
以上是一个，下面也是一个：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table{ border-left: 1px solid gray; border-top: 1px solid gray; width: 300px;}
td{ border-bottom: 1px solid gray; border-right: 1px solid gray;}
.hide{ display: none;}
.selected{ border-bottom: 1px solid white;}
</style> <script>
window.onload=function(){ var tr=document.getElementById("table").getElementsByTagName("tr")
var td=tr[0].getElementsByTagName("td") for(var i=0;i<td.length;i++){
td[i].index=i
td[i].onmouseover=function(){
for(var j=1;j<tr.length;j++){
if(this.index+1 == j){
td[j-1].className='selected';
tr[j].className='';
}else{
td[j-1].className='';
tr[j].className='hide';
}
} } }
} </script>
</head>
<body>
<table id="table" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="selected">aaa</td>
<td>bbb</td>
<td>ccc</td>
</tr>
<tr>
<td colspan="3">a1<br>a2<br>a3</td>
</tr>
<tr class="hide">
<td colspan="3">b1<br>b2<br>b3</td>
</tr>
<tr class="hide">
<td colspan="3">c1<br>c2<br>c3</td>
</tr>
</table>
</body>
</html>
注意到我们在中间都是用了index这个新添加的属性，如果我们不使用这个属性而直接使用i来代替，即24行为if(i+1 == j){
结果就会发现，所有的下半部分内容都被隐藏起来了，而在22和23行之间插入console.log(i)你就会发现i输出结果都是3.
这是因为在绑定事件的时候并不是
i=0-》开始绑定-》将i=0继续代入事件中作为参数-》完成-》继续，并开始下一个循环i=1
而是：
i=0 ->开始绑定事件-》异步绑定事件，同时，i变为1，开始继续绑定事件-》.....
由于绑定事件并不是和i的增加是同步的，即，在i顺序执行的时候，绑定事件被抛出了这一个执行列表，跑到了另一个执行列表当中，而这个异步执行列表的速度有没有原来的快，所以——【当事件开始绑定的时候，循环已经结束，i已经成为了最大值。】
—————————— 抛出 ————————————
i=0 -------》》》 绑定事件1
—————————— ——————————————
i=1 -------》》》 绑定事件2
—————————— ——————————————
i=2 -------》》》 绑定事件3
—————————— ——————————————
.....
.....
(还没完？） 绑定结束
—————————— ——————————————
(赶紧给我） 《《《------ 交还结果
顺序执行表 异步执行表
循序执行很快（毕竟就是循环，几乎是瞬间完成），所以在顺序执行完毕后，异步才慢慢开始绑定，最终将结果加载回来。