I want to ensure that the parent navigation item is highlighted when a user is on a child page based on the URL.
For example, if the user is currently viewing foo1-child and the parent is foo1, I need to apply the active class to Foo 1:
http://foo.com/foo1/foo1-child.htmlNAV:
<ul class="main-nav">
<li><a href="/foo.com/foo1.html">Foo 1</a></li>
<li><a href="/foo.com/foo5.html">Foo 5</a></li>
</ul>
While adding an active class to links in the navigation is straightforward by comparing the href attribute with the URL, how can I specifically look for a matching anchor link name or similar identifier within the URL?
Current JS
$('.main-nav li > a').each(function () {
var $this = $(this);
if ($this.attr('href').indexOf(location.pathname) !== -1) {
$this.addClass('active');
}
});