jQuery лучше добавить активный класс в пункт меню

Question

Этот простой скрипт добавляет «активный» класс к ссылке в списке, когда URL-адрес страницы = атрибут href ссылки

var TheP   = window.location.pathname.split('/');
var HeRe   = TheP[TheP.length-1];
$('ul a').each(function(){
 var Link  = $(this).attr('href');
      if (Link == HeRe){ $(this).addClass('active');}
 });

И это работает.Но ... только когда атрибут href представляет собой один файл href="index.html".Не работает вообще в этих следующих случаях или аналогичных:

<a href="foo/index.html">foo</a>
<a href="../bar/index.html">bar</a>

На самом деле, чтобы решить это, я мог бы написать:

 var TheP = window.location.pathname.split('/');
 var P1   = TheP[TheP.length-1];
 var P2   = TheP[TheP.length-2];
 var HeRe = P2+"/"+P1;

 $('ul a').each(function(){
  var Ln = $(this).attr('href');
  var Ln = Ln.split('/');
  var L1 = Ln[Ln.length-1];
  var L2 = Ln[Ln.length-2];
  var Link = L2+"/"+L1;
      if (Link == HeRe){$(this).addClass('active');}
 });

Но ... эм ... Я думаю,должен быть лучшим и более гибким способом.Кроме того, потому что вышеописанное не работает, если в качестве пути указан только один файл: (

Answer 1

Обновление : Я неправильно понял вопрос.Перечитывая его, звучит так, как будто вы хотите быть уверены, что не соответствует всем index.html с, а только тому, в котором вы находитесь (что на самом деле имеет больше смысла).

В этом случае вы можете сделать это:

var path = window.location.href; // Just grabbing a handy reference to it
$('ul a').each(function() {
    if (this.href === path) {
        $(this).addClass('active');
    }
});

... потому что свойство href (которое не совпадает с атрибутом "href")элемент DOM - это абсолютный путь .

Живой пример

Очевидно, чем больше вы можете сделать, чтобыПервоначальный селектор (в пределах разумного), тем лучше.Например, если все это находится в некоторой структуре навигации, только работа в этой структуре будет более эффективной.

Кроме того, если будет много совпадений, вы можете избежать выполненияjQuery-оболочка при добавлении класса, если вам нравится:

    if (this.href === path) {
        this.className += " active"; // note the space
    }

---

Исходный ответ :

Если атрибуты href всегда будут иметь /перед частью имени файла, затем:

var TheP   = window.location.pathname.split('/');
var HeRe   = TheP[TheP.length-1];
$('ul a[href$="/' + HeRe + '"]').addClass('active');

, использующий атрибут , заканчивающийся селектором для поиска соответствующих ссылок.

Если атрибуты href могут иногдабыть просто index.html или подобным, вы можете сделать это:

var TheP   = window.location.pathname.split('/');
var HeRe   = TheP[TheP.length-1];
$('ul a[href$="/' + HeRe + '"], ul a[href="' + HeRe + '"]').addClass('active');

..., который поймает те, с / перед ними, используя селектор «заканчивается», а такжегде точное совпадение выполняется с помощью селектора «равно».

Answer 2

var TheP = window.location.pathname.split('/');
var HeRe = TheP[TheP.length-1];
$('ul a[href$="' + HeRe + '"]').addClass('active');

Согласно спецификации http://www.w3.org/TR/css3-selectors/#attribute-substrings:

Для соответствия подстрок в значении атрибута предусмотрены три дополнительных селектора атрибута:

• [att ^ = val] Представляет элемент с атрибутом att, значение которого начинается с префикса "val".Если «val» - пустая строка, то селектор ничего не представляет.
• [att $ = val] Представляет элемент с атрибутом att, значение которого заканчивается суффиксом «val»,Если «val» - пустая строка, то селектор ничего не представляет.
• [att * = val] Представляет элемент с атрибутом att, значение которого содержит хотя бы один экземплярподстрока "val".Если «val» - пустая строка, то селектор ничего не представляет.

Answer 3

Вместо того, чтобы разбивать путь, почему бы вам не сравнить все это.Если у вас есть относительные URL, это должно быть легко.Кроме того, вы можете выполнить замену, чтобы иметь дело с абсолютными URL.

var mainpart = window.location.protocol + "//" + window.location.host;
var path = '/' + window.location.pathname;
$('ul a').each(function(){
    var Link  = $(this).attr('href').replace(mainpart, '');
    if (Link === path || '/' + Link === path){ $(this).addClass('active');}
});