Добавить тегу класс при клике на него jquery

Question

На всех страница сайта есть меню в виде списка ul li a.

Можно ли при клике по ссылке тегу li всегда добавлять класс active, но только тому элементу на странице, по которому был клик?

<ul">
    <li><a href="#">Title</a></li>
    <li><a href="#">Title</a></li>
    <li><a href="#">Title</a></li>
    <li><a href="#">Title</a></li>
    <li><a href="#">Title</a></li>
</ul>

Прошу помощи в реализации.

Answer 1

Для доступа к "родителю" используйте parent(), для поиска среди всех "родителей" используйте closest(), и, наконец, для поиска среди "братьев" используйте siblings():

$('ul.menu a').on('click', function(event) {
  $(this).parent().addClass('active').siblings().removeClass('active');
  event.preventDefault();
})

.active {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
  <li><a href="#">Title</a></li>
  <li><a href="#">Title</a></li>
  <li><a href="#">Title</a></li>
  <li><a href="#">Title</a></li>
  <li><a href="#">Title</a></li>
</ul>

Answer 2

Можно реализовать через get параметры, при загрузке страницы брать параметр из url и проверять если есть такой параметр в вашем ul li a, то к родительскому тегу a/li добавлять класс active. Если это не очень хороший вариант, то объясните почему

<li><a href="link1?param=link1">Link1</a></li>

далее js проверка

БЛОГ НА HUSL

Добавить тегу класс при клике на него jquery

Ответы (2 шт):