jQuery菜单活动链接

Question

我正在尝试制作一个jQuery菜单，在我点击其中一个链接时（不重新加载页面），它会将其类更改为“active”，并在我点击另一个链接时删除此类。

这是我的代码：

<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>

有人能告诉我为什么我的代码不起作用以及如何修复它吗？ 谢谢 :)

- b0nd

Answer 1

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

.children().("a")

代码的其余部分也有一些根本性的缺陷。请尝试使用以下代码替代：

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

在这个更正中，类名selected被应用于一个<li>元素，而不是一个<a>元素，这样你在编写CSS时会有更好的灵活性。

- Ron DeVera

Answer 2

我会做出改变：

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

to

$("this").addClass('selected').siblings().removeClass("selected");

- jps

Answer 3

$(document).ready(function() {
  $(".buttons a").click(function() {
    $(".buttons a").removeClass("selected");
    $(this).addClass("selected"); 
  });
});

- alex

---

唯一的问题是，由于竞态条件，可能会产生不稳定的结果，您无法确定addClass将在removeClass之后触发。 - jps

@Jud 你说得没错，不过我已经在生产代码中使用了它，并且从未发现它与自身冲突。 - alex

请原谅我如果我错了，但是JavaScript的单线程特性不意味着它会一次只运行一行代码，调用任何额外的代码（例如jQuery的内部方法）然后再执行下一行吗？ - alex

我不会对此抱有太大的期望，但我已经实现了那个确切的函数，并获得了不同的结果。但是，如果它在这种情况下有效，为什么要修复它呢？ - jps

你的解决方案可行，但不幸的是它不能给予样式父标签的灵活性。谢谢。 - b0nd