Добавете Активен клас за навигация въз основа на URL - CSS-трикове

Anonim

В идеалния случай извеждате този клас от сървърната страна, но ако не можете ...

Да предположим, че имате навигация по този начин:



    

  • Home
    • 

  • About
    • 

  • Clients
    • 

  • Contact Us
    •

И вие сте на URL адреса:

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

И искате връзката About да получи клас „активен“, за да можете визуално да посочите, че това е активната навигация.

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

По същество това ще съответства на връзките в навигационния атрибут href, който започва с „/ about“ (или каквато и да е вторичната директория).