Aktive Navigationsklasse basierend auf URL hinzufügen - CSS-Tricks

Anonim

Idealerweise geben Sie diese Klasse von der Serverseite aus, aber wenn Sie nicht können ...

Angenommen, Sie haben eine solche Navigation:



    

  • Home
    • 

  • About
    • 

  • Clients
    • 

  • Contact Us
    •

Und Sie sind an der URL:

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

Und Sie möchten, dass der Link "Info" eine Klasse von "aktiv" erhält, damit Sie visuell anzeigen können, dass es sich um die aktive Navigation handelt.

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

Im Wesentlichen entspricht dies den Links in der Navi, deren href-Attribut mit "/ about" beginnt (oder was auch immer das sekundäre Verzeichnis ist).