Postavljanje aktivne stavke izbornika na temelju trenutnog URL-a pomoću jQuery

Ovaj se problem pojavljuje iznova i iznova prilikom izrade web stranica: Kako mogu odrediti trenutno mjesto korisnika kako bih mogao istaknuti aktivni odjeljak u navigacijskom izborniku? To je tako osnovna potreba, ali čini se da je rješenje ponovno pronađeno u svakoj novoj gradnji.

Dvije su glavne rute kojima možete krenuti prilikom dinamičkog rješavanja ovog problema, na strani poslužitelja i klijenta. Riješiti ovo na strani poslužitelja je lijepo jer ćete imati bolju obradu na stranici koja se traži, ali to nije uvijek praktično. Uz malo planiranja, prilično je jednostavno to riješiti na klijentskoj strani koristeći JavaScript (i po želji jQuery).

Pretpostavimo da u zaglavlju imate osnovni navigacijski izbornik i želite promijeniti boju pozadine trenutne stranice na kojoj se nalazite.

U idealnom slučaju, kada kliknete na obilazak i preusmjerite se na stranicu obilaska, željeli biste da izbornik odražava vaše trenutno mjesto.

Da bismo to učinili pomoću jQueryja, usporedit ćemo atribut href svake veze na izborniku s trenutnim URL-om preglednika i pokušati pronaći podudaranje. Ako se pronađe podudaranje, postavit ćemo taj element na aktivan dodavanjem klase u

  • element.

    Neto rezultat ovog vrlo osnovnog primjera izgleda ovako

    Pri svakom učitavanju stranice ova skripta izvršava i uspoređuje href svake veze izbornika s trenutnim URL-om stranice počevši od imena domene i nastavljajući unaprijed za onoliko znakova koliko postoji u hrefu (slično funkciji startWith ()). To omogućuje svim podstranicama "Obilazak" da označe obilazak i kao aktivni odjeljak, na primjer, /tour/section2.html. Kada se pronađe podudaranje, nadređeni element - u ovom slučaju an

  • - ima dodanu klasu "aktivno".

    Ovo rješenje možete pronaći na jsFiddle za upotrebu i također je ugrađeno u nastavku. Glavna stvar koju ćete morati promijeniti za vlastite potrebe je odabir ".nav" u retku 9 JavaScript-a. Ovo bi trebalo izmijeniti kako biste odabrali navigacijski element koji želite obraditi.

    Primijetite da primjer jsFiddle neće raditi jer zapravo ne možete promijeniti URL u prozoru s rezultatima, ali kôd možete lako kopirati u HTML datoteku da biste ga testirali.