Ajouter une classe de navigation active basée sur l'URL - Astuces CSS

Anonim

Idéalement, vous sortez cette classe du côté serveur, mais si vous ne pouvez pas…

Disons que vous avez une navigation comme celle-ci:



    

  • Home
    • 

  • About
    • 

  • Clients
    • 

  • Contact Us
    •

Et vous êtes à l'URL:

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

Et vous voulez que le lien À propos de pour obtenir une classe «active» afin que vous puissiez indiquer visuellement qu'il s'agit de la navigation active.

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

Essentiellement, cela correspondra aux liens dans la navigation dont l'attribut href commence par «/ about» (ou quel que soit le répertoire secondaire).