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

2

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

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

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

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

Ваш Ответ

4   ответа
11

Попробуй это

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

Если вы хотите сделать это с помощью 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 для установки начальных стилей, что всегда хорошо.

0

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

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

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

Похожие вопросы