实验楼

<script> document.getElementById("syl").style.color = "green"; </script>

<style> #list li { list-style-type: none; width: 100px; height: 50px; line-height: 50px; background-color: beige; text-align: center; float: left; }

  #list li.current {
    background-color: red;
  }

  #list li a {
    text-decoration: none;
  }
</style>
copy

<script>
  // 获取所有的 li 标签
  var liObjs = document.getElementById("list").getElementsByTagName("li");
  // 循环遍历，找到每个 li 中的 a，注册点击事件
  for (var i = 0; i < liObjs.length; i++) {
    // 每个 li 中的 a
    var aObj = liObjs[i].firstElementChild;

    aObj.onclick = function() {
      // 把这个 a 所在的 li 的所有的兄弟元素的类样式全部移除
      for (var j = 0; j < liObjs.length; j++) {
        liObjs[j].removeAttribute("class");
      }
      //当前点击的 a 的父级元素 li(点击的这个 a 所在的父级元素 li)，设置背景颜色
      this.parentNode.className = "current";
    };
  }
</script>
copy

 <script> function mOver(obj) { obj.innerHTML = "你把鼠标移到了上面 "; }

  function mOut(obj) {
    obj.innerHTML = "你把鼠标移开了";
  }
</script>
copy