Programmering

Indstilling af et aktivt menupunkt baseret på den aktuelle URL med jQuery

Dette problem dukker op igen og igen, når der oprettes websteder: Hvordan bestemmer jeg brugerens aktuelle placering, så jeg kan fremhæve det aktive afsnit i navigationsmenuen? Det er sådan et grundlæggende behov, men løsningen ser ud til at blive genopfundet på hver nybygning.

Der er to hovedruter, du kan tage, når du løser dette problem på en dynamisk måde, serversiden og klientsiden. Det er rart at løse dette på serversiden, fordi du har et bedre håndtag på den side, der bliver anmodet om, men det er ikke altid praktisk. Med lidt planlægning er det ret ligetil at løse dette på klientsiden ved hjælp af JavaScript (og eventuelt jQuery).

Lad os antage, at du har en grundlæggende navigationsmenu i dit overskrift, og at du vil ændre baggrundsfarven på den aktuelle side, du er på.

Ideelt set, når du klikker på Tour og bliver ført til siden Tour, vil du gerne have, at menuen afspejler din aktuelle placering.

For at gøre dette ved hjælp af jQuery skal vi sammenligne href-attributten for hvert menulink med den aktuelle browser-URL og forsøge at finde et match. Hvis der findes et match, indstiller vi dette element til aktivt ved at føje en klasse til

  • element.

    Nettoresultatet af dette meget grundlæggende eksempel ser sådan ud

    På hver side indlæses dette script og sammenligner href for hvert menulink med den aktuelle sidens URL startende efter domænenavnet og fortsætter fremad i så mange tegn, som der findes i href (svarende til en startsWith () -funktion). Dette giver mulighed for, at alle undersider af "Tour" også kan markere Tour som den aktive sektion for eksempel /tour/section2.html. Når der findes et match, er det overordnede element - i dette tilfælde en

  • - har en klasse af "aktiv" tilføjet.

    Denne løsning kan findes på jsFiddle til brug og er også indlejret nedenfor. Det vigtigste, du skal ændre efter dine egne behov, er ".nav" -vælgeren på linje 9 i JavaScript. Dette skal ændres for at vælge det navigationselement, du vil behandle.

    Bemærk, at jsFiddle-eksemplet ikke fungerer, fordi du ikke kan ændre URL'en i resultatvinduet, men du kan nemt kopiere koden til en HTML-fil for at teste den.