Ссылка не меняет цвет при нажатии

Question

У меня есть функция jquery, которая меняет цвет при нажатии на ссылку. Мой код выберет родителя для элемента, по которому щелкнули, и добавит новый класс с именем «active», и удалит все классы «active» у братьев и сестер, у которых также есть активный класс. Но когда я выполняю свой код, он вообще ничего не меняет. Также проверил консоль, актив не добавляет к нажатой li.

Вот мой код:

$("#menu-links > li a").on("click", function() {
    $("#menu-links > li a").parent().addClass('.active').siblings().removeClass('.active')
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu-links">
  <li class="active"><a href="#">HOME</a></li>
  <li> <a href="#">ABOUT ME</a></li>
  <li> <a href="#">PROFILE</a></li>
  <li> <a href="#">CONTACTS</a></li>
</ul>

Answer 1

Вы должны использовать this и удалить точку из имени класса в функциях добавления / удаления:

$("#menu-links > li a").on("click", function() {
  $(this).parent().addClass('active').siblings().removeClass('active')
})

a {
  color: black;
  text-decoration: none;
}

.active a {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu-links">
  <li class="active"><a href="#">HOME</a></li>
  <li> <a href="#">ABOUT ME</a></li>
  <li> <a href="#">PROFILE</a></li>
  <li> <a href="#">CONTACTS</a></li>
</ul>

Answer 2

Попробуйте использовать вот так

$("#menu-links > li").on("click",'a', function() {
    $("#menu-links > li a").parent().addClass('active').siblings().removeClass('active')
})

(или)

$("document").on("click","#menu-links li a" function() {
    $("#menu-links > li a").parent().addClass('active').siblings().removeClass('active')
})

Возможно, проблема связана с загрузкой вашего JavaScript перед созданием # списка ссылок на меню. Второй фрагмент будет работать, если это проблема.