Adding Classes to Navigation based on self.location
Hi all.
I've just been passed this little snippet from a friend whose asking me the following questions?
His navigation code is as follows :-
<div id="mainNavigation">
<ul>
<li><a href="index.html">0</a></li>
<li><a href="index1.html">1</a></li>
<li><a href="index2.html">2</a></li>
<li><a href="index3.html">3</a></li>
<li><a href="index4.html">4</a></li>
<li><a href="index5.html">5</a></li>
</ul>
</div>
and basically he wants to add a class to the page that is currently being displayed? I guess you can access that from the self.location object.
So if a user was was looking at index.html then say a class of 'active' would be added to this <a> tags parent the <li> tag.
To be honest my JavaScript isn't up to much - it's been many years since I looked at any but from what I've gleamed, the following jQuery code will add the required class but I can not for the life of me get the logic right to make it only add the class to the matched link? i.e. the one the user is currently on?
$('#mainNavigation ul li').addClass('active');
I know it's a big ask but can anyone point me in the right direction with this?
Any help is much appreciated.
Cheers
K