title: Adding 'active' class current menu item w/ JQuery
body: <p>There have been several SO solutions to this, but I haven't had any luck getting them to work.  JQuery beginner trying to work through a solution to add an 'active' class to the active list item in a simple navigation menu:</p>
  
  <pre><code>   &lt;div id="main-menu"&gt;
  
        &lt;ul&gt;
           &lt;li&gt;&lt;a href="/site/about"&gt;About Us&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="/site/work"&gt;Our Work&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="/site/contact"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;    
        &lt;/ul&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>A previous SO post indicated that this worked, but I've had no success so far.  I'm using pretty permalinks in wordpress, so the full path to any page is like:</p>
  
  <p><a href="http://www.foobar.com/site/about/" rel="nofollow">http://www.foobar.com/site/about/</a></p>
  
  <p>This is my work so far:</p>
  
  <pre><code>&lt;script&gt;
  $(function(){
      var url = window.location.pathname,
          urlRegExp = new RegExp(url.replace(/\/$/,''));    
          $('#main-menu li').each(function(){
              if(urlRegExp.test(this.href)){
                  $(this).addClass('active');
              }
          });
  });​
  &lt;/script&gt;
  </code></pre>
  
  <p>I've tried several solutions, including changing how I write the href, etc.  The part of the code I'm really foggy on is the urlRegExp part...Any help?</p>