Veidojot vietnes, šī problēma parādās atkal un atkal: Kā es varu noteikt lietotāja pašreizējo atrašanās vietu, lai es navigācijas izvēlnē varētu iezīmēt aktīvo sadaļu? Tā ir tik pamatvajadzība, taču šķiet, ka risinājums tiek izgudrots katrā jaunajā būvē.
Dinamiski risinot šo problēmu, varat veikt divus galvenos maršrutus - servera un klienta pusē. Tas ir jauki atrisināt servera pusē, jo jums būs labāk rīkoties ar pieprasīto lapu, taču tas ne vienmēr ir praktiski. Ar nelielu plānošanu ir diezgan vienkārši to atrisināt klienta pusē, izmantojot JavaScript (un pēc izvēles jQuery).
Pieņemsim, ka galvenē ir navigācijas pamata izvēlne un vēlaties mainīt pašreizējās lapas fona krāsu.
Ideālā gadījumā, ja noklikšķināt uz Ceļojums un tiekat novirzīts uz Ceļojuma lapu, vēlaties, lai izvēlne atspoguļotu jūsu pašreizējo atrašanās vietu.
Lai to izdarītu, izmantojot jQuery, mēs salīdzināsim katras izvēlnes saites href atribūtu ar pašreizējo pārlūkprogrammas URL un mēģināsim atrast atbilstību. Ja tiek atrasta atbilstība, mēs aktivizēsim šo elementu, pievienojot tam klasi
Šī ļoti piemēra tīrais rezultāts izskatās šādi
Katru lappuses ielādi šis skripts izpilda un salīdzina katras izvēlnes saites href ar pašreizējā lapas URL, kas sākas aiz domēna nosaukuma un turpinās uz priekšu tik daudz rakstzīmju, cik eksistē href (līdzīgi kā funkcija startWith ()). Tas ļauj jebkurai “Tour” apakšlapai arī atzīmēt Tour kā aktīvo sadaļu, piemēram, /tour/section2.html. Kad tiek atrasta atbilstība, vecāku elements - šajā gadījumā an
Šis risinājums ir atrodams vietnē jsFiddle lietošanai, un tas ir arī iegults zemāk. Galvenais, kas jums jāmaina savām vajadzībām, ir “.nav” selektors JavaScript 9. rindā. Tas ir jāpārveido, lai atlasītu apstrādājamo navigācijas elementu.
Ņemiet vērā, ka jsFiddle piemērs nedarbosies, jo rezultātu logā faktiski nevar mainīt URL, taču kodu varat viegli nokopēt HTML failā, lai to pārbaudītu.
