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 применяется к <li>, а не к <a>, чтобы повысить гибкость при написании 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"); 
  });
});