Agregar clase de navegación activa basada en URL | Programar Plus

Lo ideal sería generar esta clase desde el lado del servidor, pero si no puede …

Digamos que tiene una navegación como esta:

<nav>
	<ul>
		<li><a href="https://css-tricks.com/">Home</a></li>
		<li><a href="http://css-tricks.com/about/">About</a></li>
		<li><a href="http://css-tricks.com/clients/">Clients</a></li>
		<li><a href="http://css-tricks.com/contact/">Contact Us</a></li>
	</ul>
</nav>	

Y estás en la URL:

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

Y desea que el enlace Acerca de obtenga una clase de “activo” para que pueda indicar visualmente que es la navegación activa.

$(function() {
  $('nav a[href^="https://css-tricks.com/" + location.pathname.split("https://css-tricks.com/")[1] + '"]').addClass('active');
});

Básicamente, eso coincidirá con los enlaces en el navegador cuyo atributo href comience con “/ about” (o lo que sea que sea el directorio secundario).