Динамично добавяне на .active клас към основната горна лента

Това може да се направи с JQuery, но точният метод зависи от това как страниците ви се показват в адресната лента.

Следното предполага, че URL е както следва:

http://example.com/page/stuff_not_counted

Предоставеният код ще добави стойността на page към променливата page. След това можете да използвате това, за да изберете li елемент, към който да използвате метода addClass jQuery, за да добавите класа active

Както можете да видите в момента, този кодов фрагмент ще добави този клас към всички li елементи на страницата. Ще искате да определите подходящ Селектор, който да използвате, за да гарантирате, че само един от li елемента получава този клас. Това обикновено е id, както е показано по-долу.

$("#" + page) – Тази селекторна функция получава елемента с id="page", където page е стойността във вашата променлива.

КОД

<script>

// Retrieve current Pathname
var path = $(location).attr('pathname');
// Removes everything before and including the first /
var page = path.split('/')[1]
// Make sure we are working
console.log(page);
$( "#" + page ).addClass( "active" );

</script>

jsFiddle

Ако трябва да преработите за dirrent URL синтаксис или Selector метод, моля, предоставете примерен URL и li елемент.