Този проблем се появява отново и отново при изграждането на уебсайтове: Как да определя текущото местоположение на потребителя, за да мога да откроя активната секция в менюто за навигация? Това е толкова основна необходимост, но изглежда, че решението е преоткрито при всяка нова компилация.
Има два основни маршрута, които можете да предприемете, когато решавате този проблем по динамичен начин, от страна на сървъра и клиента. Решаването на това от страна на сървъра е хубаво, защото ще имате по-добра обработка на исканата страница, но не винаги е практично. С малко планиране е доста лесно да се реши това от страна на клиента с помощта на JavaScript (и по желание jQuery).
Да предположим, че имате основно меню за навигация в заглавката и искате да промените цвета на фона на текущата страница, на която се намирате.
В идеалния случай, когато щракнете върху обиколка и сте отведени на страницата на обиколката, искате менюто да отразява вашето текущо местоположение.
За да направите това с помощта на jQuery, ще сравним атрибута href на всяка връзка в менюто с текущия URL адрес на браузъра и ще се опитаме да намерим съвпадение. Ако се намери съвпадение, ние ще настроим този елемент на активен, като добавим клас към
Нетният резултат от този много основен пример изглежда така
При всяко зареждане на страница този скрипт изпълнява и сравнява href на всяка връзка от менюто с URL адреса на текущата страница, започвайки след името на домейна и продължавайки напред за толкова символи, колкото съществуват в href (подобно на функцията startWith ()). Това позволява на всички подстраници на „Обиколка“ също да маркират обиколката като активна секция, например, /tour/section2.html. Когато се намери съвпадение, родителският елемент - в случая an
Това решение може да бъде намерено в jsFiddle за използване и също е вградено по-долу. Основното нещо, което ще трябва да промените за собствените си нужди, е селекторът “.nav” на ред 9 на JavaScript. Това трябва да бъде променено, за да изберете навигационния елемент, който искате да обработите.
Обърнете внимание, че примерът jsFiddle няма да работи, защото всъщност не можете да промените URL адреса в прозореца с резултати, но можете лесно да копирате кода в HTML файл, за да го тествате.
