2回答

• 

  大年糕

  2017-08-16 12:09:56

  window.onload = function() {//页面加载完成后出发函数

          var oUl1 = document.getElementById("ul1");   //获取id为ul1的节点

          var aLi = oUl1.getElementsByTagName("li");   //获取id为ul1下的所有li节点
  

          var oDiv = document.getElementById("tab-list");   //获取id为tab-list的节点

          var aDiv = oDiv.getElementsByTagName("div");   //获取id为tab-list下的所有div节点

          for(var i = 0; i < aLi.length; i++) {   //遍历所有ul1下的li节点

              aLi[i].index = i;   //保存aLi[i]的下标（因为当鼠标滑过ul1下的li节点时此li的下标和tab-list下的div节点的下标相同，方便以后调用！）

              aLi[i].onmouseover = function() {   //当鼠标滑过ul1下的li节点时触发函数

                  for(var i = 0; i < aLi.length; i++) {  //遍历所有ul1下的li节点

                      aLi[i].className = "";  //删除ul1下的li节点className

                  }

                  this.className = "active";  //设置鼠标滑过ul1下的改li节点的className为“active”（css样式表提前设置好改active样式！）

                  for(var j = 0; j < aDiv.length; j++) {   //遍历id为tab-list下所有div节点
  

                      aDiv[j].className = "hide";   //id为tab-list下所有div节点的className设置为“hide”（即隐藏，在CSS样式表中提前已经设置了 .hide{display:none;}）

                  }

                  aDiv[this.index].className = "show";   //当鼠标滑过ul1下的li节点时和此li节点下标相同的div节点的className设置为show 即显示，在CSS样式表中提前已经设置了 .show{display:block;}

              }        

          }

      }

  希望采纳我的回答，新手自学可能回答有错误的地方所以该回答仅供参考！
  

  0 5
• 

  qq_呵呵_5

  2017-08-12 22:31:44

  onmouseover事件触发： for循环把3个li标签的class属性设为hide 然后把当前对象的class属性设为show 

  然后再style 标签里把 .hide{ display:none; } 实现隐藏其他div标签

  0 0