title: Add Active Navigation Class Based on URL
body: <p>I'm trying to add an <code>active</code> class (i.e. <code>class="active"</code>) to the appropriate menu list item based upon the page it is on once the page loads. Below is my menu as it stands right now. I've tried every snippet of code I could find in this regard and nothing works. So, can someone please explain simply where and how to add in javascript to define this task?</p>
  
  <pre><code>&lt;ul id="nav"&gt;
      &lt;li id="navhome"&gt;&lt;a href="home.aspx"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li id="navmanage"&gt;&lt;a href="manageIS.aspx"&gt;Manage&lt;/a&gt;&lt;/li&gt;
      &lt;li id="navdocso"&gt;&lt;a href="docs.aspx"&gt;Documents&lt;/a&gt;&lt;/li&gt;
      &lt;li id="navadmin"&gt;&lt;a href="admin.aspx"&gt;Admin Panel&lt;/a&gt;&lt;/li&gt;
      &lt;li id="navpast"&gt;&lt;a href="past.aspx"&gt;View Past&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Here is an example of the javascript that I'm putting in my head tag in my site master. What am I doing wrong?</p>
  
  <pre><code>$(document).ready(function () {
      $(function () {
          $('li a').click(function (e) {
              e.preventDefault();
              $('a').removeClass('active');
              $(this).addClass('active');
          });
      });
  });
  </code></pre>