Kак при клике на элемент меню добавить к нему класс active?
У меня есть меню, при клике на элемент которого с низу этого элемента должно появиться белое подчеркивания. Я написал код на 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'); }); }); |
// Получите все элементы меню 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> |
<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>
Дополнительно:
когда тебя перебрасывает на другую страницу, у тебя не сохраняется состояние так как браузер заново начинает грузить весь твой html, csss, js с нуля
есть 3 варианта решения проблемы
1 - использовать роут на js, и переходить по ссылкам без перезагрузки страниц
2 - localStorage ( отслеживать через js, и давать нужной ссылке класс active )
3 - отдавать страницы готовые с бэка, где уже будет вешаться класс нужной ссылке в зависимости от Url
Ну так вы ставите класс на текущей странице, а потом сразу загружаете другую, которая про установленный на предыдущей странице класс ничего не знает.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для добавления класса active при клике на элемент меню, вам необходимо использовать JavaScript. Вот пример кода на JavaScript, который решит вашу проблему:
```html
.active {
background-color: #f4f4f4;
color: #333;
}
document.addEventListener('DOMContentLoaded', function() {
var menuItems = document.querySelectorAll('.menu-item');
menuItems.forEach(function(item) {
item.addEventListener('click', function() {
menuItems.forEach(function(item) {
item.classList.remove('active');
});
this.classList.add('active');
});
});
});
```
Этот код добавляет класс active к элементу меню при клике на него, а также удаляет класс active у всех остальных элементов меню. Поместите этот код в ваш HTML файл, и вы увидите, что класс active будет добавляться к элементу при клике на него. Не забудьте стилизовать класс active в CSS, чтобы он выделялся на вашей странице.