Ustawienie aktywnego elementu menu na podstawie bieżącego adresu URL za pomocą jQuery

Ten problem pojawia się w kółko podczas tworzenia witryn internetowych: Jak określić bieżącą lokalizację użytkownika, aby podświetlić aktywną sekcję w menu nawigacji? To taka podstawowa potrzeba, ale rozwiązanie wydaje się być odkrywane na nowo w każdej nowej kompilacji.

Istnieją dwie główne ścieżki, którymi można się kierować, rozwiązując ten problem w sposób dynamiczny, po stronie serwera i po stronie klienta. Rozwiązanie tego problemu po stronie serwera jest przyjemne, ponieważ będziesz mieć lepszą obsługę żądanej strony, ale nie zawsze jest to praktyczne. Przy odrobinie planowania rozwiązanie tego problemu po stronie klienta jest całkiem proste przy użyciu JavaScript (i opcjonalnie jQuery).

Załóżmy, że masz w nagłówku podstawowe menu nawigacyjne i chcesz zmienić kolor tła bieżącej strony, na której jesteś.

Idealnie byłoby, gdyby po kliknięciu opcji Wycieczka i przeniesieniu do strony Wycieczka menu odzwierciedlało aktualną lokalizację.

Aby to zrobić za pomocą jQuery, porównamy atrybut href każdego łącza menu z aktualnym adresem URL przeglądarki i spróbujemy znaleźć dopasowanie. Jeśli zostanie znalezione dopasowanie, ustawimy ten element jako aktywny, dodając klasę do

  • element.

    Wynik netto tego bardzo podstawowego przykładu wygląda następująco

    Na każdej załadowanej stronie skrypt wykonuje i porównuje href każdego linku menu z adresem URL bieżącej strony, zaczynając od nazwy domeny i kontynuując do przodu dla tylu znaków, ile istnieje w href (podobnie do funkcji startedWith ()). Dzięki temu wszystkie podstrony „Wycieczka” mogą również oznaczać Wycieczkę jako aktywną sekcję, na przykład /tour/section2.html. Po znalezieniu dopasowania element nadrzędny - w tym przypadku plik

  • - ma dodaną klasę „aktywnych”.

    To rozwiązanie można znaleźć na jsFiddle do użytku, a także jest osadzone poniżej. Główną rzeczą, którą musisz zmienić dla własnych potrzeb, jest selektor „.nav” w linii 9. JavaScript. Należy to zmienić, aby wybrać element nawigacji, który chcesz przetworzyć.

    Zwróć uwagę, że przykład jsFiddle nie zadziała, ponieważ w rzeczywistości nie możesz zmienić adresu URL w oknie wyników, ale możesz łatwo skopiować kod do pliku HTML, aby go przetestować.