title: Highlight Parent Link in Navigation Menu With Jquery
body: <p>I'm using the following Jquery to highlight the link for the current page in my navigation.</p>
  
  <pre><code>// Add Active Class To Current Link
  var url = window.location; // get current URL
  $('#nav a[href="'+url+'"]').addClass('active');
  </code></pre>
  
  <p>My navigation looks like this:</p>
  
  <pre><code>&lt;nav&gt;
    &lt;ul id="nav"&gt;
      &lt;li&gt;&lt;a href=""&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;About Us&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href=""&gt;Sub Link 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;Sub Link 2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;Sub Link 3&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Products&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Contact&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>The nav has a subnav for the "About Us" section.</p>
  
  <p>I'd like to have the "About Us" Link receive the "active" class so it stays highlighted when I'm on one of its subnav pages.</p>
  
  <p>So for example, if I'm on the "Sub Link 2" page, the About Us link is given an active class.</p>
  
  <p>Can anyone point me in the right direction here?</p>
  
  <p>Thanks for your help</p>