javascript - 单击时更改列表项中 anchor 的背景颜色

Question

我有由 ul li 构建的菜单，每个菜单中都有 anchor 标记。 CSS应用于 anchor 和 anchor :悬停但是我希望所选项目显示它已被选中，并将背景更改为不同的颜色。 anchor :事件不起作用。

我正在尝试 JavaScript，但尚未成功。这可以单独通过CSS来完成吗？我看过很多例子，但没有一个真正有效。

JavaScript

 <script type="text/javascript">
      function ChangeColor(obj) {
         var li = document.getElementById(obj.id);
         li.style.background = "#bfcbd6";
      }
 </script>

HTML

 <div id="navigation">
      <ul>
          <li><a onclick="changecolor(this);" href="Default.aspx">Home</a></li>
          <li><a onclick="changecolor(this);" href="View.aspx">View</a></li>
          <li><a onclick="changecolor(this);" href="About.aspx">About</a></li>
      </ul>
  </div>

CSS - 简化

#navigation ul {
  list-style-type: none;
}

#navigation li 
{
  float: left;
}

#navigation a
{
  background-color: #465c71;
}

#navigation a:hover
{
  background-color: #bfcbd6;
}

Answer 1

您不需要再次获取 id 来处理元素。 obj 引用实际元素。

 <script type="text/javascript">
      function ChangeColor(obj) {
         obj.style.backgroundColor = "#bfcbd6";
      }
 </script>

编辑:并且javaScript 区分大小写，因此您应该检查函数名称。

Here is a jsFiddle Demo