Добавить активный класс навигации на основе URL - CSS-хитрости

Anonim

В идеале вы выводите этот класс со стороны сервера, но если вы не можете…

Допустим, у вас есть такая навигация:



    

  • Home
    • 

  • About
    • 

  • Clients
    • 

  • Contact Us
    •

И вы находитесь по адресу:

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

И вы хотите, чтобы ссылка «О программе» получила класс «активный», чтобы вы могли визуально указать, что это активная навигация.

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

По сути, это будет соответствовать ссылкам в навигаторе, атрибут href которого начинается с «/ about» (или любого другого дополнительного каталога).