Javascript jQuery菜单活动链接

我试图创建一个jquery菜单，当我单击其中一个链接（不重新加载页面）时，它会将其类更改为“活动”，并在单击另一个链接时删除该类

这是我的密码：

<script type="text/javascript">
$(document).ready(function() {
  $(".buttons").children().("a").click(function() {
    $(".buttons").children().toggleClass("selected").siblings().removeClass("selected");
  });
});
</script>


  <ul class="buttons">
    <li><a class="button" href="#">Link1</a></li>
    <li><a class="button" href="#">Link2</a></li>
    <li><a class="button" href="#">Link3</a></li>
    <li><a class="button" href="#">Link4</a></li>
  </ul>

$（文档）.ready（函数（）{
$（“.buttons”）.children（）（“a”）。单击（函数（）{
$（“.buttons”）.children（）.toggleClass（“选定”）.Siddines（）.removeClass（“选定”）；
});
});

有人能告诉我为什么我的代码不工作以及如何修复它吗？ 谢谢：）

我想换一下：

$(".buttons").children().toggleClass("selected").siblings().removeClass("selected");

到

---

原始代码失败，因为此语法无效：

.children().("a")

代码的其余部分也有一些基本缺陷。请尝试以下方法：

$(function () {
  $('.buttons a').click(function (event) {
    var $target = $(event.target);
    var $li = $target.parent();
    $li.addClass('selected').siblings().removeClass('selected');
  });
});

---

在此更正中，所选的类将应用于一个

，而不是一个
，以便在编写CSS时提供更好的灵活性。
唯一的问题是，由于竞态条件，您无法确定在RemoveClass之后是否会触发addClass，因此这可能会产生不稳定的结果。@Jud您是正确的，但是，我在生产代码中使用了它，从来没有冲突过。如果我错了，请原谅我，但是JavaScript的单线程性质是否意味着它将一次一行地运行，在转到下一行执行之前调用任何额外的代码（如jQuery的内部方法）？我不会对它下太多赌注，但我实现了这个精确的函数，结果不一。但是，如果它在这种情况下工作，为什么要修复它呢？您的解决方案可以工作，但不幸的是，它没有给父标记设置样式的灵活性。谢谢
.children().("a")

$(function () {
  $('.buttons a').click(function (event) {
    var $target = $(event.target);
    var $li = $target.parent();
    $li.addClass('selected').siblings().removeClass('selected');
  });
});