Стиль сслыки на активную страницу на 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 сылки и сравнения её пути с текущим.

Просмотров:   2545

Комментарии

пн, 06/16/2014 - 15:44
Гость

$('a[href="' + window.location.href + '"]').addClass('active');

сб, 01/03/2015 - 20:15
Юрий

Спасибо! Искал везде, но только здесь нашел то, что у меня заработало как надо. Воспользовался вторым вариантом. Еще раз спасибо!

Добавить комментарий

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.
CAPTCHA
Введи эти символы. Ато роботы одолели!