Задаване на активен елемент от менюто въз основа на текущия URL с jQuery

Този проблем се появява отново и отново при изграждането на уебсайтове: Как да определя текущото местоположение на потребителя, за да мога да откроя активната секция в менюто за навигация? Това е толкова основна необходимост, но изглежда, че решението е преоткрито при всяка нова компилация.

Има два основни маршрута, които можете да предприемете, когато решавате този проблем по динамичен начин, от страна на сървъра и клиента. Решаването на това от страна на сървъра е хубаво, защото ще имате по-добра обработка на исканата страница, но не винаги е практично. С малко планиране е доста лесно да се реши това от страна на клиента с помощта на JavaScript (и по желание jQuery).

Да предположим, че имате основно меню за навигация в заглавката и искате да промените цвета на фона на текущата страница, на която се намирате.

В идеалния случай, когато щракнете върху обиколка и сте отведени на страницата на обиколката, искате менюто да отразява вашето текущо местоположение.

За да направите това с помощта на jQuery, ще сравним атрибута href на всяка връзка в менюто с текущия URL адрес на браузъра и ще се опитаме да намерим съвпадение. Ако се намери съвпадение, ние ще настроим този елемент на активен, като добавим клас към

  • елемент.

    Нетният резултат от този много основен пример изглежда така

    При всяко зареждане на страница този скрипт изпълнява и сравнява href на всяка връзка от менюто с URL адреса на текущата страница, започвайки след името на домейна и продължавайки напред за толкова символи, колкото съществуват в href (подобно на функцията startWith ()). Това позволява на всички подстраници на „Обиколка“ също да маркират обиколката като активна секция, например, /tour/section2.html. Когато се намери съвпадение, родителският елемент - в случая an

  • - има добавен клас „активен“.

    Това решение може да бъде намерено в jsFiddle за използване и също е вградено по-долу. Основното нещо, което ще трябва да промените за собствените си нужди, е селекторът “.nav” на ред 9 на JavaScript. Това трябва да бъде променено, за да изберете навигационния елемент, който искате да обработите.

    Обърнете внимание, че примерът jsFiddle няма да работи, защото всъщност не можете да промените URL адреса в прозореца с резултати, но можете лесно да копирате кода в HTML файл, за да го тествате.