Adding an active css class to navigation with jQuery

Question

Hi All I'm looking for a simple unobtrusive way to add a class="active" to an unordered list menu based on the directory it's in. Unfortunately I can't add a custom class to the body tag so I'm unable to use a pure css solution.

Can anyone point me to a good tutorial - I've looked but can't find one that fit's my needs. Code looks like this, I just need to add the class based on /directory/ or / a jquery solution would be ideal as I'm already loading the jQuery library.

<ul class="nav">
<li><a href="/index.html">Home</a></li>
<li><a href="/about/about.html">About Us</a></li>
<li><a href="/cv/submit-your-cv.html">Submit CV</a></li>
<li><a href="/vacancies/index.html">Vacancies</a></li>
<li><a href="/news/news.html">Company News</a></li>
<li><a href="/praise/praise.html">Praise</a></li>
<li class="nosep"><a href="/contact/contact.html">Contact Us</a></li>
</ul>

Answer 1

You could look at the window.location variable and set an id to each li-element. Then something like:

$("...").addClass("myCssClass");

Hope it helps in some way...

Answer 2

Try this:

$(".nav li:has(a[href$='"+window.location.pathname+"'])").addClass("active");