window.onload = function()  

   // window.onload 页面加载事件，会在页面全部加载完成之后立即执行function函数

{   var oTab = document.getElementById("tabs");

    var oUl = oTab.getElementsByTagName("ul")[0]; 

  //注意：getElementsByTagName得到的是一个索引从0开始的数组，要获取数组里面的某一个元素，需要加上相应的索引值[i]，即使数组里面只有一个元素，也需要加上[0]；

    var oLis = oUl.getElementsByTagName("li");    // 得到 li 标签的一个数组，索引值从0-2

    var oDivs= oTab.getElementsByTagName("div") ;   // 得到 div 标签的一个数组，索引值从0-2

    for(var i= 0;i<oLis.length;i++)   //遍历所有的  li 标签

    {

         oLis[i].index = i;   //后面 li 与 div 匹配要用

        //  为了供后面这句使用oDivs[this.index].className = "";这里的this.index就在相当于oLis[i].index

         oLis[i].onclick = function()

         // onclick鼠标单击事件，在网页上单击鼠标，调用它的对象  ( 此处是oLis[i] )  就会触发该事件

             {

                   for(var n= 0;n<oLis.length;n++)  {

                           oLis[n].className = "";  // 遍历所有的li标签，  这里先令    li标签的类名为 空 

                           oDivs[n].className = "hide"; // 遍历所有的div标签，这里先令   所有的div标签类名为"hide"

                          } 

                   this.className = "on";    // this指向的是oLis[i]，this.className即oLis[i].className 

                 //  这句的意思就是  再令  当前鼠标点击的对象li  ( oLis[i] )  的类名为“on”

                  //js中的this关键字，this指向的是调用该方法的对象。这是一个很重要的概念！

                  oDivs[this.index].className = "";  

              // this.index就在相当于oLis[i].index ，而 oLis[i].index = i;  

             //  这句相当于 oDivs[i] .className = "";     即再令  oLis[i]所对应的 oDivs[i] 的类名为“”

                }

           }       

     }

以上是我个人的分析结果，希望可以帮到你~  一起进步呦~

for(var i = 0; i<myLi.length;i++) ==>这是触发mouseover事件；

 myLi[i].index = i; ==》 这是匹配的关键值；

for(var j = 0; j < myLi.length; j++) ==》 这是取消所有内容style;

this.className = "on";   ==>mouseover触发；

 myDiv[this.index].className = "show";  ==》匹配到就展示；