for(var i = 0; i < aLi.length; i++) {
     //进入for循环
            aLi[i].index = i;
            //在这里储存一个索引值(索引值代表着li的下标，具体的可以多看看for循环的有关内容)
            aLi[i].onmouseover = function() {
            //给每一个li添加一个鼠标移入事件
                for(var i = 0; i < aLi.length; i++) {
                    aLi[i].className = "";
                }
                //这个for循环的作用是清除掉  所有  li的classname
               // (为什么清除classname呢？
                //因为这里结合后面可以知道是通过给className来控制div的现实与否，比直接控制style样式方便)
                
                this.className = "active";
                //这里的this指向的是我们触发的li，就是说鼠标移到哪个li上时this就指向哪个li，这时li的样式会改变                
                for(var j = 0; j < aDiv.length; j++) {
                    aDiv[j].className = "hide";
                }
                //这里让所有的div都隐藏掉
                
                aDiv[this.index].className = "show";
                //aLi[i].index = i;  因为无法直接用i，所以通过这种方法来变相的获取i的值。
                //通过this.index来获取到一个下标，从而控制相对应的div进行显示
            }        
        }
    }