Adicionar classe de navegação ativa com base na URL - CSS-Tricks

Anonim

O ideal é que você produza essa classe do lado do servidor, mas se não puder ...

Digamos que você tenha uma navegação como esta:



    

  • Home
    • 

  • About
    • 

  • Clients
    • 

  • Contact Us
    •

E você está no URL:

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

E você deseja que o link Sobre obtenha uma classe de “ativo” para que possa indicar visualmente que é a navegação ativa.

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

Essencialmente, isso corresponderá aos links no nav cujo atributo href comece com “/ about” (ou qualquer que seja o diretório secundário).