title: Keep menu item active after clicking on link on current page
body: <p>Basically, I'm trying to add the class <code>active</code> to the current menu item. I succeeded by using the following jQuery code.</p>
  
  <pre><code>    jQuery(document).ready(function($){
          var path = window.location.href;
          $('#nav-main li a').each(function() {
              if (this.href === path) {
                  $(this).addClass('active');
              }
          });
      });
  </code></pre>
  
  <p>My navigation bar looks like this:</p>
  
  <pre><code>    &lt;ul id="nav-main"&gt;
          &lt;li&gt;
              &lt;a href="/"&gt;Home&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="/brands"&gt;Brands&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="/users"&gt;Users&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="/employees"&gt;Employees&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>Which has the following CSS:</p>
  
  <pre><code>    ul#nav-main {
          width: 1050px;
          margin: 0 auto;
          color: #fff;
      }
      ul#nav-main li {
          margin: 0 5px 0 5px;
          list-style-type: none;
          text-align: center;
          display: inline-block;
          font-size: 17px;
      }
      ul#nav-main li a {
          padding: 0 15px;
          line-height: 2.692307692;
          display: inline-block;
          text-decoration: none;
          color: #fff;
      }
      ul#nav-main li a:hover {
          background-color: rgba(0, 0, 0, 0.3);
      }
      ul#nav-main li a.active {
          background-color: rgba(0, 0, 0, 0.3);
      }
  </code></pre>
  
  <p>Now, when I click on 'Users' I go to <code>/users</code> and the jQuery code successfully adds the <code>active</code> class so that 'Users' is shown as the current menu item in the navigation bar. However, when I click on a link on the 'Users' page which leads to, for example, <code>/users/view/12345</code> (in which <code>12345</code> is the ID of a user), the 'Users' page isn't shown as the current menu item anymore.</p>
  
  <p>I think this has to do with the fact that the jQuery code only looks to <code>nav-main li a</code> and not to other <code>a</code>'s at the page. Is there something I could add to my jQuery code to make this work?</p>