Ta težava se vedno znova pojavlja pri izdelavi spletnih mest: Kako določim trenutno lokacijo uporabnika, da lahko v navigacijskem meniju označim aktivni odsek? To je tako osnovna potreba, vendar se zdi, da je rešitev na novo zasnovana pri vsaki novi gradnji.
Pri dinamičnem reševanju te težave lahko uporabite dve glavni poti, na strani strežnika in odjemalca. Reševanje tega na strani strežnika je lepo, saj boste imeli boljšo rokovanje na zahtevani strani, vendar ni vedno praktično. Z malo načrtovanja je to enostavno rešiti na strani odjemalca z uporabo JavaScript (in po želji jQuery).
Predpostavimo, da imate v glavi osnovni navigacijski meni in želite spremeniti barvo ozadja trenutne strani, na kateri ste.
Ko kliknete na Ogled in ste preusmerjeni na stran z obiskom, bi bilo najbolje, da meni odraža vašo trenutno lokacijo.
Če želite to narediti z uporabo jQuery, bomo primerjali atribut href vsake povezave do menija s trenutnim URL-jem brskalnika in poskusili najti ujemanje. Če najdete ujemanje, bomo ta element postavili na aktivnega, tako da bomo razredu dodali razred
Neto rezultat tega zelo osnovnega primera je videti takole
Pri vsakem nalaganju strani ta skript izvede in primerja href vsake povezave v meniju s trenutnim URL-jem strani, ki se začne za imenom domene in nadaljuje naprej za toliko znakov, kolikor obstaja v href-u (podobno funkciji startWith ()). To omogoča, da katere koli podstrani »Tour« tudi označijo Tour kot aktivni odsek, na primer /tour/section2.html. Ko najdete ujemanje, nadrejeni element - v tem primeru an
To rešitev najdete na jsFiddle za uporabo in je prav tako vdelana spodaj. Glavna stvar, ki jo boste morali spremeniti za svoje potrebe, je izbirnik ".nav" v 9. vrstici JavaScripta. To je treba spremeniti, da izberete navigacijski element, ki ga želite obdelati.
Primer jsFiddle ne bo deloval, ker v oknu z rezultati dejansko ne morete spremeniti URL-ja, lahko pa kopirate kodo v datoteko HTML in jo preizkusite.
