2015-08-17 8 views
2

Я пытаюсь добавить класс к якорю текущего URL-адреса в навигации по меню, чтобы отличить его. Я провел исследование и использовал этот фрагментДобавление класса к определенному элементу href с помощью JavaScript

'http://' + window.location.hostname + window.location.pathname 

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

$('[href="http://' + window.location.hostname + window.location.pathname 
+ '"]').addClass("current-menu-item"); 

и ничего не сработало. Мне интересно, не хватает ли я чего-то очевидного или если есть более элегантный способ решения этой проблемы. Любые советы высоко ценится! Благодаря!

+1

@Popnoodles поправьте меня, если я ошибаюсь, но это не: активное свойство просто в то время как нажатие на ссылку? Я говорю о таргетинге на элемент навигации для текущей страницы пользователя. –

+0

Ух, да. :(:(:( – Popnoodles

+0

возможный дубликат [Добавить «.active» класс в ссылку текущей страницы в меню с помощью jQuery или PHP] (http://stackoverflow.com/questions/13349046/add-active-class-to -the-current-pages-link-in-a-menu-using-jquery-or-php) – Popnoodles

ответ

0

Вы можете сделать это следующим образом:

$(function() { 
    $('nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('current-menu-item'); 
}); 

Ваш текущий селектор слишком общий характер, он будет предназначаться любые ссылки на вашей странице. Просто измените селектор nav a в приведенном выше примере, чтобы он соответствовал вашему конкретному HTML.

От CSS-Tricks

+0

В настоящее время '' http: // '+ window.location.hostname + window.location.pathname' выдает точный URL-адрес якорь, который я пытаюсь настроить. Проблема заключается в добавлении класса в href с определенным URL-адресом. –

0
var href = window.location.href.match(/[A-Za-z\_]+$/); 
if(!href || !href[0]) 
    return false; 
$("[active='"+href+"']").addClass("active"); 
+0

Несмотря на то, что ваш код может быть правильным, вы должны также включить комментарий или объяснение, чтобы он не выглядел подозрительным. –

Смежные вопросы