Aggiungi classe di navigazione attiva basata su URL - Trucchi CSS

Anonim

Idealmente, emetti questa classe dal lato server, ma se non puoi ...

Supponiamo che tu abbia una navigazione come questa:



    

  • Home
    • 

  • About
    • 

  • Clients
    • 

  • Contact Us
    •

E sei all'URL:

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

E vuoi che il link Informazioni ottenga una classe di "attivo" in modo da poter indicare visivamente che è la navigazione attiva.

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

Essenzialmente questo corrisponderà ai collegamenti nel nav il cui attributo href inizia con "/ about" (o qualunque sia la directory secondaria).