window.onload=function(){
       // var tab=document.getElementById("tables");
        var li=document.getElementsByTagName("li");
        var div=document.getElementsByTagName("div");
        for(var i=0;i<li.lenghth;i++){
            li[i].index=i; //给li[i]对象创建了一个新的属性，把索引的值就是i存储到这个属性index中（这是重点），为什么要这样做？因为函数的有单独自己的作用域，外面的i和函数里面的i是不一样的。
            li[i].onlick=function(){ 
             for(var n=0;n<li.length:n++){
                 li[n].className=""; // 把所有li的className值清空
                div[n].className="hide"; // 同上，其实这里也可以把div的className="" ,起到把值清空的作用
             } 
              this.className = "on";  
              div[this.index].className = ""; //this.index 就是变量i的值，看前面的代码 li[i].index=i; 
        }
    }