Add Active Navigation Class Based on URL

0
0

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).

  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.