Adăugați o clasă de navigare activă bazată pe URL - CSS-Tricks

Anonim

Ideal ar fi să scoateți această clasă din partea serverului, dar dacă nu puteți ...

Să presupunem că aveți o navigație așa:



    

  • Home
    • 

  • About
    • 

  • Clients
    • 

  • Contact Us
    •

Și sunteți la adresa URL:

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

Și doriți ca linkul Despre să obțină o clasă de „activ”, astfel încât să puteți indica vizual că este navigarea activă.

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

În esență, acest lucru se va potrivi cu legăturile din nav care este atributul href care începe cu „/ about” (sau oricare ar fi directorul secundar).