Tento problém se při vytváření webů objevuje znovu a znovu: Jak zjistím aktuální polohu uživatele, abych mohl zvýraznit aktivní sekci v navigační nabídce? Je to tak základní potřeba, ale zdá se, že řešení je objeveno při každém novém sestavení.
Při řešení tohoto problému dynamickým způsobem můžete jít dvěma hlavními cestami, na straně serveru a na straně klienta. Řešení na straně serveru je hezké, protože budete mít lepší zacházení s požadovanou stránkou, ale není to vždy praktické. S trochou plánování je celkem jednoduché to vyřešit na straně klienta pomocí JavaScriptu (a volitelně jQuery).
Předpokládejme, že máte v záhlaví základní navigační nabídku a chcete změnit barvu pozadí aktuální stránky, na které se nacházíte.
V ideálním případě, když kliknete na Prohlídku a dostanete se na stránku Prohlídka, chtěli byste, aby nabídka odrážela vaši aktuální polohu.
Za tímto účelem pomocí jQuery porovnáme atribut href každého odkazu na nabídku s aktuální adresou URL prohlížeče a pokusíme se najít shodu. Pokud je nalezena shoda, nastavíme tento prvek na aktivní přidáním třídy do
Čistý výsledek tohoto velmi základního příkladu vypadá takto
Při každém načtení stránky tento skript provede a porovná href každého odkazu na nabídku s aktuální adresou URL stránky, která začíná za názvem domény a pokračuje vpřed o tolik znaků, kolik ve href existuje (podobně jako funkce startWith ()). To umožňuje jakýmkoli podstránkám „Prohlídka“ také označit Prohlídku jako aktivní sekci, například /tour/section2.html. Když je nalezena shoda, nadřazený prvek - v tomto případě an
Toto řešení najdete pro použití na jsFiddle a je také vloženo níže. Hlavní věc, kterou budete muset změnit pro své vlastní potřeby, je selektor „.nav“ na řádku 9 JavaScriptu. To by mělo být upraveno tak, aby bylo možné vybrat navigační prvek, který chcete zpracovat.
Všimněte si, že příklad jsFiddle nebude fungovat, protože ve výsledkovém okně nemůžete skutečně změnit adresu URL, ale můžete jej snadno zkopírovat do souboru HTML a otestovat.
