jQuery: Main nav items selected depending on URL or page name
<p>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.</p>

<p>What I need is very simple as far as logic goes.</p>

<p>I have a nav bar like this one:</p>

<pre><code>&lt;nav&gt;
    &lt;ul&gt;
       &lt;li&gt;&lt;a href="download.shtml"&gt;Download&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="documentation.shtml"&gt;Documentation&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="contact.shtml"&gt;Contact&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="about.shtml"&gt;About&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/nav&gt;
</code></pre>

<p>And the URLs of the site are straightforward:</p>

<pre><code>http://domain.net/download.shtml
http://domain.net/documentation.shtml
http://domain.net/contact.shtml
http://domain.net/about.shtml
</code></pre>

<p><strong>Question:</strong></p>

<p>How can I detect which page/URL I'm on and add a class of <code>.active</code> to the corresponding nav item?</p>

<p>The end result would be, for example if I'm in the Download page:</p>

<pre><code>&lt;nav&gt;
    &lt;ul&gt;
       &lt;li&gt;&lt;a href="download.shtml" class="active"&gt;Download&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="documentation.shtml"&gt;Documentation&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="contact.shtml"&gt;Contact&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="about.shtml"&gt;About&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/nav&gt;
</code></pre>

<p>Thanks in advance for any help on this matter.</p>
