Как удалять класс у предыдущего объекта?

Question

[ZeeGi01]

Для headera нужно при клике добавлять класс, а у предыдущего удалять, и все чтобы это работало после перезагрузки, я разобрался как сделать, чтобы класс не удалялся после перезагрузки, но теперь не могу сделать, чтобы он удалялся.

HTML

<nav class="nav" id="nav">
  <a class="nav__link  active" href="#">Главная</a>
  <a class="nav__link" href="#">Услуги</a>
  <a class="nav__link" href="#">Портфолио</a>
</nav>

CSS

.nav{
    display: flex;
    font-size: 20px;
    font-weight: 500;
}

.nav__link{
    padding: 20px 10px;
    color: black;
    text-decoration: none;
    cursor: pointer;
    border-radius: 20px;
    transition:  background .1s linear;
}

.nav__link:hover{
    background-color: gray;
    transition:  background .3s linearl
}

.active {
    color: red;
    background-color red;
    transition: background .3s linear;
}

JavaScript

if (localStorage.getItem('addClass') === 'true') {
    $('.nav__link').addClass('active');
}

$('.nav__link').on('click', function() {

    var navBar = document.getElementById('nav')

    for (var i = 0; i < navBar.length; i++) {
        NavBar.removeClass('active')

    }


    $('.nav__link').addClass('active');
    localStorage.setItem('addClass', 'true');
});

Answer 1

[Тигран Абрамян]

const $navLink = $('.nav__link');
const activeClass = 'active';
const navClass = localStorage.getItem('add-class');

if (navClass) {
  $navLink
    .removeClass(activeClass)
    .eq(navClass)
    .addClass(activeClass);
}

$navLink.on('click', function() {
  $navLink.removeClass(activeClass);
  $(this).addClass(activeClass);
  localStorage.setItem('add-class', $(this).index());
});

Comments

[ZeeGi01]

Спасибо,но после перезагрузки перестал сохранятся класс

[Тигран Абрамян]

ZeeGi01, изменил ответ

[ZeeGi01]

Спасибо большое работает, но попытался вставить в проект который на gulp,так вот там header в отдельном файле,и он даёт класс но сразу он исчезает,не знаете может ли это влиять на работу вашего скрипта ?

[Тигран Абрамян]

ZeeGi01, не знаю

[ZeeGi01]

Огромное спасибо,это я затупил,все решил,спасибо вам огромное !