This is prob real simple to you, but this newbie can't figur
Hi guys,
I've got a problem that's been killing me, but I bet you guys can solve it in no time.
I've got a nested list like so:
-
<ul id="mainnav">
<li><a href="/">Home</a>
<ul>
<li><a href="/weblog/">News & Upates</a></li> <!-- link with trailing slash -->
<li><a href="/welcome">First time here?</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</li>
<li><a href="/about/">About</a> <!-- another link with trailing slash -->
<ul>
<li><a href="/about/service-times">Service Times</a></li>
<li><a href="/about/membership">Membership</a></li>
</ul>
</li>
</ul>
I want to add a class of 'current' to the list elements that contain a link to the current path in the URL. So here's my code:
-
$(document).ready(function(){
// set path to present URL
var path = location.pathname;
// add class .current to li elements that contain matching link to var
$('#mainnav a[@href$="' + path + '"]').parents("li").addClass('current');
});
At the website root ('/'), I want only the first list item to get the 'current' class. Unfortunately what happens is that ALL list items containing links with a trailing slash gets the 'current' class, i.e. parent lis to /weblog/ and /about/ also get the 'current' class.
How do I prevent the parent lists elements of /weblog/ and /about/ from getting the 'current' class? Thanks
David