Kак при клике на элемент меню добавить к нему класс active?

Question

[oleg20091301]

У меня есть меню, при клике на элемент которого с низу этого элемента должно появиться белое подчеркивания. Я написал код на js но при клике на элемент меню меня просто перебрасывает на другую страницу, а подчеркивания не появляется, хотя при клике на элемент у которого нет ссылки на страницу подчеркивание появляется. Вот код

// Получите все элементы меню
const menuItems = document.querySelectorAll('.menu__item');

// Переберите каждый элемент меню и добавьте обработчик события для клика
menuItems.forEach(item => {
    item.addEventListener('click', () => {
        // Удалите класс menu__item_active у всех элементов меню
        menuItems.forEach(item => {
            item.classList.remove('menu__item_active');
        });
        
        // Добавьте класс menu__item_active к выбранному элементу меню
        item.classList.add('menu__item_active');
    });
});

Html код

<nav class="menu">
                    <ul class="menu__list">
                         <li class="menu__item menu__item_active" id="menu__item">
                            <a href="index.html">
                                Главная
                            </a>
                        </li>
                        <li class="menu__item">
                            <a href="test.html">
                                Тесты 
                            </a>
                         </li>
                        <li class="menu__item">
                            <a href="results.html">
                                Результаты
                            </a>
                         </li>
                         <li class="menu__item">
                            <a href="about.html">
                                О нас
                            </a>
                        </li>
                        <li class="menu__item">
                            <a href="#">
                                Профиль
                            </a>
                        </li>
                        <li class="menu__item">
                            <a href="#">
                                Контакты
                            </a>
                        </li>
                     </ul>
                </nav>

Comments

[szQocks]

когда тебя перебрасывает на другую страницу, у тебя не сохраняется состояние так как браузер заново начинает грузить весь твой html, csss, js с нуля

есть 3 варианта решения проблемы

1 - использовать роут на js, и переходить по ссылкам без перезагрузки страниц
2 - localStorage ( отслеживать через js, и давать нужной ссылке класс active )
3 - отдавать страницы готовые с бэка, где уже будет вешаться класс нужной ссылке в зависимости от Url

Answer 1

[Rsa97]

Ну так вы ставите класс на текущей странице, а потом сразу загружаете другую, которая про установленный на предыдущей странице класс ничего не знает.