Legg til aktiv navigasjonsklasse basert på URL - CSS-triks

Anonim

Ideelt sett sender du ut denne klassen fra serversiden, men hvis du ikke kan ...

La oss si at du har navigering slik:



    

  • Home
    • 

  • About
    • 

  • Clients
    • 

  • Contact Us
    •

Og du er på URL:

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

Og du vil at About-lenken skal få en klasse med "aktiv" slik at du visuelt kan indikere at den er aktiv navigering.

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

I hovedsak vil det samsvare med lenker i navet som har href-attributt, begynner med "/ about" (eller hva den sekundære katalogen skjer).