Стиль сслыки на активную страницу на JavaScript

При оформлении любого сайта становиться вопрос и стилизации меню навигации. И так уж повелось, что модно делать так, чтобы ссылка на текущую страницу выделялась особым цветом или бекграундом.
Реализовать такое проще всего при помощи js скрипта с использованием jQuery.

Есть две возможные ситуации.
1. Вам нужно добавить класс active к ссылке на текущую страницу.
2. Вам нужно добавить класс active к элементу списка, который содержит ссылку на данную страницу.

В первом случа все вообще просто:

<script type="text/javascript" charset="utf-8">
jQuery(function() {
  jQuery('.primary-nav a').each(function() {
    if (jQuery(this).attr('href')  ===  window.location.pathname) {
      jQuery(this).addClass('active');
    }
  });
}); 

Вам нужно просто перебрать элементы навигации, сравнивая ссылки тегов «а» с текущим URL.
Во втором же случае, все несколько сложнее. Хотя не на много. Я бы сказал: «не так очевидно».

<script type="text/javascript" charset="utf-8">
jQuery(function() {
  jQuery('.primary-nav li').each(function() {
    var href = jQuery(this).find('a').attr('href');
    if (href === window.location.pathname) {
      jQuery(this).addClass('active');
    }
  });
});  

Тот же перебор элементов меню навигации. Только перебор тегов li. Сравнение производиться путем поиска в теге li сылки и сравнения её пути с текущим.

 

Похожий код:

Фото аватара
Алексей Петров

Программист, разработчик с 5 летним опытом работы. Учусь на разработчика игр на Unity и разработчика VR&AR реальности (виртуальной реальности). Основные языки программирования: C#, C++.

Оцените автора
Бла, бла код
Добавить комментарий