Ideally you output this class from the server side, but if you can’t… Let’s say you have navigation like this:

<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/clients/">Clients</a></li>
<li><a href="/contact/">Contact Us</a></li>
</ul>
</nav>

And you are at the URL: http://yoursite.com/about/team/ And you want the About link to get a class of “active” so you can visually indicate it’s the active navigation.

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

Essentially that will match links in the nav who’s href attribute begins with “/about” (or whatever the secondary directory happens to be).

css tricks