Dette problemet dukker opp igjen og igjen når jeg bygger nettsteder: Hvordan bestemmer jeg brukerens nåværende plassering slik at jeg kan markere den aktive delen i navigasjonsmenyen? Det er et så grunnleggende behov, men løsningen ser ut til å bli oppfunnet på nytt.
Det er to hovedruter du kan ta når du løser dette problemet på en dynamisk måte, serversiden og klientsiden. Det er fint å løse dette på serversiden fordi du får et bedre håndtak på siden du blir bedt om, men det er ikke alltid praktisk. Med litt planlegging er det ganske greit å løse dette på klientsiden ved hjelp av JavaScript (og eventuelt jQuery).
La oss anta at du har en grunnleggende navigasjonsmeny i overskriften, og at du vil endre bakgrunnsfargen på den aktuelle siden du er på.
Ideelt sett vil du at menyen skal gjenspeile din nåværende posisjon når du klikker på Tur og blir ført til tur-siden.
For å gjøre dette ved hjelp av jQuery, skal vi sammenligne href-attributtet til hver menylink til den nåværende nettleser-URL-en og prøve å finne et samsvar. Hvis det blir funnet en kamp, setter vi det elementet til aktivt ved å legge til en klasse i
Nettoresultatet av dette helt grunnleggende eksemplet ser slik ut
På hver side laster dette skriptet ut og sammenligner href for hver menylink til den gjeldende sidens URL startende etter domenenavnet og fortsetter fremover i så mange tegn som finnes i href (ligner på en startsWith () -funksjon). Dette gjør at alle undersider av "Tour" også kan markere Tour som den aktive delen, for eksempel /tour/section2.html. Når en kamp blir funnet, vil det overordnede elementet - i dette tilfellet en
Denne løsningen finner du på jsFiddle for bruk og er også innebygd nedenfor. Det viktigste du må endre for dine egne behov er ".nav" -velgeren på linje 9 i JavaScript. Dette bør endres for å velge navigasjonselementet du vil behandle.
Vær oppmerksom på at jsFiddle-eksemplet ikke fungerer fordi du ikke kan endre URLen i resultatvinduet, men du kan enkelt kopiere koden til en HTML-fil for å teste den.
