title: How do I highlight the active menu using javascript?
body: <p>I use the script below to highlight the active menu in twitter bootstrap.</p>
  
  <pre><code>/* This is cool it sets the right navbar element active */
  $(document).ready(function () {
      $('a[href="' + this.location.pathname + '"]').parent().addClass('active');
  });
  </code></pre>
  
  <p>The bootstrap html the above script works on looks like this:</p>
  
  <pre><code>&lt;ul class="nav navbar-nav navbar-right"&gt;
  
      &lt;li&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt; &lt;a href="/about/"&gt;About&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt; &lt;a href="/articles/"&gt;Articles&lt;/a&gt;&lt;/li&gt;
  
  &lt;/ul&gt;
  </code></pre>
  
  <p>If the url is, say:</p>
  
  <pre><code>example.com/articles/
  </code></pre>
  
  <p>It works great and the articles menu item is highlighted</p>
  
  <p>However, if the url is say:</p>
  
  <pre><code>example.com/articles/cars
  example.com/articles/cars/
  example.com/articles/cars/mini
  </code></pre>
  
  <p>It no longer sets the articles menu item active.</p>
  
  <p>Any ideas how I can get it to set the menu item active for child articles too?</p>
  
  <p>** UPDATE **</p>
  
  <p>I'm currently on a dev box and my URL looks like this:</p>
  
  <pre><code>http://192.168.0.100:8001/about/
  http://192.168.0.100:8001/articles/
  http://192.168.0.100:8001/articles/cars/
  </code></pre>