window.onload = function() {
        var oUl1 = document.getElementById("ul1");                        
        var aLi = oUl1.getElementsByTagName("li");                        //这一句和上一句是为了获得三个标题的标签  aLi是一个长度为3的数组里面是
        var oDiv = document.getElementById("tab-list");
        var aDiv = oDiv.getElementsByTagName("div");                  //这一句和上一句是为了获得选项卡内容所在的块的标签   aDiv也是一个长度为三的数组
        for(var i = 0; i < aLi.length; i++) {
            aLi[i].index = i;                                            //以标题为基础  遍历所有标题 每个标题给个序号index  作为后面div数组的下标
            aLi[i].onmouseover = function() {                            //这里设置鼠标在标题上划过的时候的事件
                for(var i = 0; i < aLi.length; i++) {
                    aLi[i].className = "";                                //这里把所有的标题都改成没被选中的时候的类   相当于一种清空的作用  防止上次选中的在这次还被显示
                }
                this.className = "active";                                //这句就单独把选中的标题改成选中状态的类  这里的this是函数开始的时候的aLi[i]
                for(var j = 0; j < aDiv.length; j++) {                    //同上  先把所有内容块都先改成没被选中状态的类
                    aDiv[j].className = "hide";    
                }
                aDiv[this.index].className = "show";                      //同上  单独把选中的内容块改成选中状态的类
            }        
        }
    }