Lägg till aktiv navigeringsklass baserat på URL - CSS-tricks

Anonim

Helst skickar du ut den här klassen från serversidan, men om du inte kan ...

Låt oss säga att du har navigering så här:



    

  • Home
    • 

  • About
    • 

  • Clients
    • 

  • Contact Us
    •

Och du är på webbadressen:

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

Och du vill att länken Om ska få en klass av "aktiv" så att du visuellt kan ange att det är den aktiva navigeringen.

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

I huvudsak kommer det att matcha länkar i navet vars href-attribut börjar med "/ about" (eller vad den sekundära katalogen råkar vara).