jQuery 菜单活动链接

Question

我正在尝试制作一个 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>

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

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 类应用于

（而不是 ），以给出您在编写 CSS 时具有更好的灵活性。

Answer 2

我会改变

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

：

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

Answer 3

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