jQuery: Main nav items selected depending on URL or page name
- by Ricardo
Ok, I've looked all over for a solution for this but so far I'm unable to find anything related to what I need to accomplish.
What I need is very simple as far as logic goes.
I have a nav bar like this one:
<nav>
<ul>
<li><a href="download.shtml">Download</a></li>
<li><a href="documentation.shtml">Documentation</a></li>
<li><a href="contact.shtml">Contact</a></li>
<li><a href="about.shtml">About</a></li>
</ul>
</nav>
And the URLs of the site are straightforward:
http://domain.net/download.shtml
http://domain.net/documentation.shtml
http://domain.net/contact.shtml
http://domain.net/about.shtml
Question:
How can I detect which page/URL I'm on and add a class of .active to the corresponding nav item?
The end result would be, for example if I'm in the Download page:
<nav>
<ul>
<li><a href="download.shtml" class="active">Download</a></li>
<li><a href="documentation.shtml">Documentation</a></li>
<li><a href="contact.shtml">Contact</a></li>
<li><a href="about.shtml">About</a></li>
</ul>
</nav>
Thanks in advance for any help on this matter.
