Dodaj klasę aktywnej nawigacji na podstawie adresu URL - CSS-Tricks

Anonim

Idealnie byłoby wyprowadzić tę klasę po stronie serwera, ale jeśli nie możesz…

Powiedzmy, że masz taką nawigację:



    

  • Home
    • 

  • About
    • 

  • Clients
    • 

  • Contact Us
    •

Jesteś pod adresem URL:

http://yoursite.com/about/team/

I chcesz, aby link Informacje miał klasę „aktywną”, aby można było wizualnie wskazać, że jest to aktywna nawigacja.

$(function() ( $('nav a(href^="/' + location.pathname.split("/")(1) + '")').addClass('active'); ));

Zasadniczo będzie to pasować do linków w nawigacji, których atrybut href zaczyna się od „/ about” (lub jakikolwiek inny katalog dodatkowy).