Как определить текущую активную ссылку в навигационном меню

Определение активной ссылки в навигационном меню является важным аспектом при создании пользовательского интерфейса на вашем веб-сайте. Это помогает пользователям легче ориентироваться и понимать, на какой странице они находятся. В этой статье мы разберемся, как выделить активную ссылку в меню с помощью HTML, CSS и JavaScript.

Использование HTML и CSS

Самый простой способ выделить активную ссылку — добавить класс active к тегу <a> текущей страницы и применить к нему соответствующие стили CSS. Например:

<nav>
  <ul>
    <li><a href="index.html">Главная</a></li>
    <li><a href="about.html" class="active">О нас</a></li>
    <li><a href="contact.html">Контакты</a></li>
  </ul>
</nav>

a.active {
  color: #f00;
  font-weight: bold;
}

В данном случае активная ссылка будет выделена красным цветом и жирным шрифтом. Однако, этот метод подходит только для статичных сайтов, так как придется вручную добавлять и удалять класс active для каждой страницы.

Использование JavaScript

Для динамического определения активной ссылки можно использовать JavaScript. Ниже приведен пример, как это сделать:

<nav>
  <ul id="nav-menu">
    <li><a href="index.html">Главная</a></li>
    <li><a href="about.html">О нас</a></li>
    <li><a href="contact.html">Контакты</a></li>
  </ul>
</nav>

const navMenu = document.getElementById('nav-menu');
const links = navMenu.getElementsByTagName('a');

for (let i = 0; i < links.length; i++) {
  if (links[i].href === window.location.href) {
    links[i].classList.add('active');
    break;
  }
}

Этот скрипт ищет все ссылки в меню и сравнивает их href с текущим адресом страницы. Если они совпадают, то добавляется класс active.

Курсы по программированию

Помогаем получить новую профессию с гарантией трудоустройства!

Подробнее

Заключение

Теперь вы знаете, как определить и выделить текущую активную ссылку в навигационном меню с использованием HTML, CSS и JavaScript. Это улучшит пользовательский опыт на вашем сайте и поможет пользователям легче ориентироваться. Удачи вам в веб-разработке! 😉

Тест на профориентацию

За 10 минут узнайте, как ваш опыт пригодиться в IT индустрии

Подробнее