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

Question

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

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');
});

.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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

Answer 1

$('.nav__link').on('click', (event) => {
    document.querySelectorAll('nav > .nav__link').forEach(element => element.classList.remove('active'))
    event.currentTarget.classList.add('active');
    localStorage.setItem('addClass', 'true');
});

БЛОГ НА HUSL

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

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