Додати активний клас навігації на основі URL - CSS-хитрощі

Anonim

В ідеалі ви виводите цей клас з боку сервера, але якщо ви не можете…

Скажімо, у вас така навігація:



    

  • Home
    • 

  • About
    • 

  • Clients
    • 

  • Contact Us
    •

І ви знаходитесь за URL-адресою:

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

І ви хочете, щоб посилання «Про програму» отримало клас «активних», щоб ви могли візуально вказати, що це активна навігація.

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

По суті, це буде відповідати посиланням в навігаційному атрибуті href, який починається з “/ about” (або яким би не був вторинний каталог).