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

Почему при клике на элемент меню появляется подчеркивание только у элементов без ссылок, а не происходит переход на другую страницу? Вот код, который я использовал.
  • 8 октября 2023 г. 12:17
Ответы на вопрос 2
Для добавления класса "active" к элементу меню при нажатии на него можно использовать JavaScript. Вы можете добавить код следующим образом:

HTML:

```html
<ul id="menu">
  <li><a href="#" onclick="activateMenuItem(event)">Пункт 1</a></li>
  <li><a href="#" onclick="activateMenuItem(event)">Пункт 2</a></li>
  <li><a href="#" onclick="activateMenuItem(event)">Пункт 3</a></li>
</ul>
```

JavaScript:

```javascript
function activateMenuItem(event) {
  // Удалить класс "active" у всех элементов меню
  var menuItems = document.querySelectorAll("#menu a");
  for (var i = 0; i < menuItems.length; i++) {
    menuItems[i].classList.remove("active");
  }
  
  // Добавить класс "active" к выбранному элементу меню
  event.target.classList.add("active");
  
  // Отменить переход по ссылке
  event.preventDefault();
}
```

Что касается перехода на другую страницу при клике на элемент меню, то это происходит по умолчанию, если у вас правильно указаны ссылки в атрибутах `href` элементов меню. Если переход на другую страницу не происходит, возможно, в коде у вас присутствует код или атрибуты, которые блокируют переход (например, `event.preventDefault()` в приведенном выше коде).
Ставьте класс на текущей странице, а затем переходите на другую страницу, на которой класс не используется.
Похожие вопросы