javascript - jQuery/javascript - 当用户点击菜单时高亮显示

Question

你好
假设我有一个像这样的菜单:

<ul>
<li><a href="xxx">notebook</a></li>
<li><a href="xxx">camera</a></li>
<li><a href="xxx">phone</a></li>
</ul>

当我点击一个菜单时，菜单会高亮显示，如果点击另一个菜单，这个菜单会高亮显示，其他菜单会恢复原状(不高亮显示)。有人可以告诉我怎么做吗(为 <li> 或其他任何东西创建一个监听器)？
谢谢你

Answer 1

最有效的方法是通过 .delegate() ，像这样:

$("ul").delegate("li", "click", function() {
  $(this).addClass("active").siblings().removeClass("active");
});

然后给它一些样式来匹配，例如:

.active a { color: red; }

You can test it out here , 如果你想点击一个已经激活的 <li>使其处于非事件状态，然后更改 .addClass() 至 .toggleClass() , like this .