@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');
});
  • Вопрос задан
  • 71 просмотр
Решения вопроса 1
TAbrahamyan
@TAbrahamyan
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());
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы