Что надо прописать в jquery, чтобы выделялась активная ссылка?

Question

Прописываю в стилях

.active {
  color: red;
}

и прописываю в js файле

$('a').on('click', function(event) {
     $(this).addClass('active');
     $('a').removeClass('active');
});

в итоге должно получиться так- при нажатии на ссылку она становится активной и должна гореть красной, при нажатии на другую ссылку, уже нажатая должна гореть красной, а предыдущая гаснуть. Но в итоге это все работает только когда удаляется строчка $('a').removeClass('active') и тогда ссылки хотя бы начинают гореть при нажатии, но почему это происходит? Почему .removeClass вообще не работает? Как сделать правильно?

сам сайт tempest.beget.tech

Answer 1

В текущей реализации вы берёте данную ссылку - добавляете ей класс и сразу же его удаляете.
Вам необходимо удалять у всех остальных ссылок.

    $('a').on('click', function(event) {
        $('a.active').removeClass('active'); // Удаляем класс active у всех ссылок, у кого он проставлен.
        $(this).addClass('active'); // Текущему элементу проставляем класс active
    });

    .active {
        color: red;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#">123</a>
<a href="#">123</a>
<a href="#">123</a>
<a href="#">123</a>

БЛОГ НА HUSL

Что надо прописать в jquery, чтобы выделялась активная ссылка?

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