1回答

• 

  ChildEden

  2017-07-29 22:46:35

  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";                      //同上  单独把选中的内容块改成选中状态的类
              }        
          }
      }

  0 1