JQuery активный класс для пункта меню на основе текущего URL

У меня есть следующий код, который должен добавить активный класс CSS к пункту меню, если пункт меню url == текущий URL:

$("#accordion a").each(function() 
{   
    if (this.href.search(window.location.hostname) != -1)
    {
        $(this).addClass("active-sidebar-link");
    }
});

но это добавляет класс ко всем пунктам меню. какие-нибудь советы?

 kayen15 мая 2012 г., 06:51
window.location.hostname вернет вам имя хоста страницы, т.stackoverflow.com. Вместо этого вы должны использоватьlocation.href илиlocation.pathname чтобы получить правильное совпадение.

Ответы на вопрос(4)

Решение Вопроса

Попробуй это

$("#accordion a").each(function() {   
    if (this.href == window.location.href) {
        $(this).addClass("active-sidebar-link");
    }
});
 ᴍᴀᴛᴛ ʙᴀᴋᴇʀ01 апр. 2016 г., 15:40
С помощьюpathname вместо тогоhref должно помочь.
 ᴍᴀᴛᴛ ʙᴀᴋᴇʀ01 апр. 2016 г., 15:31
Это работает, но оно сломается, если в URL есть фрагмент. Напримерdomain.com/folder/#top.
$('#accordion a[href="'+ window.location.hostname +'"]').addClass('active-sidebar-link');

Используйте функцию фильтра:

$("#accordion a")
.filter(function(){ 
    return location.href.match($(this).attr("href"))
})
.addClass("active-sidebar-link");

Возвращает только отфильтрованные элементы, которые в этом случае будут ссылками с текущим URL, и добавляет классactive-sidebar-link к нему.

Если вы хотите сделать это с помощью jQuery, вы можете:

$("#accordion a").addClass(function(){
  return this.href === window.location 
    ? "active-sidebar-link" 
    : "" ;
});

Однако, есть гораздо лучший способ стилизовать ссылки на текущую страницу. Обычно это связано с тем, чтоbody элемент имя класса, которое соответствует вашим ссылкам:

<body class="home">
   <a class="home" href="foo.html">Home</a>
   <a class="contact" href="bar.html">Contact</a>
</body>

В этом случае вы бы выбрали активные стили ссылок следующим образом:

body.home a.home,
body.contact a.contact {
  color: green;
}

Этот метод не требует JavaScript для установки начальных стилей, что всегда хорошо.

Ваш ответ на вопрос