Tilføj Active Navigation Class Baseret på URL - CSS-tricks

Anonim

Ideelt set sender du denne klasse fra serversiden, men hvis du ikke kan ...

Lad os sige, at du har sådan navigation:



    

  • Home
    • 

  • About
    • 

  • Clients
    • 

  • Contact Us
    •

Og du er på URL:

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

Og du vil have About-linket for at få en klasse af "aktiv", så du visuelt kan angive, at det er den aktive navigation.

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

I det væsentlige vil det matche links i navet, hvis href-attribut begynder med "/ about" (eller hvad den sekundære mappe tilfældigvis er).