title: Highlight active menu item
body: <p>I have a menu created by a list. I would like to be able to highlight the current menu item.</p>
  
  <p>With this script I'm able to match the last bit of the url (everything after the last <code>/</code>), but I need the script to match the two previous folders in the url as well. So instead of e.g.<code>index.html</code>, I'd like to grab <code>/folder1/folder2/index.html</code>.</p>
  
  <pre><code>$(function () {
      var url = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
      $(".nav li a").each(function () {
          //console.log(url);
          if ($(this).attr("href") == url) $(this).parent().addClass("active");
      });
  });
  
  
  //Markup:
  
  &lt;ul id="nav"&gt;
        &lt;li&gt;&lt;a href="/folder1/folder2/index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="/folder1/folder2/about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="/folder1/folder2/contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>How do I modify the script to match more parts of the url?</p>