title: Make Twitter Bootstrap navbar link active
body: <p>What's the standard way to make the active link in a Twitter Bootstrap navbar bolded? It's clear that a link gains the active appearance by gaining the "active" class. For example, the <code>Home</code> link below is active. When I click any link in the navbar, should a use jQuery to remove all classes from <code>li</code> elements and then add the <code>active</code> class to the link I've id'd? </p>
  
  <pre><code>&lt;ul class="nav"&gt;
  &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Link 3&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>EDIT</strong>: I included</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $('.nav li a').on('click', function() {
      alert('clicked');
      $(this).parent().parent().find('.active').removeClass('active');
      $(this).parent().addClass('active');
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>after the links. The alert appears when I click a link, but the "active" class is not added to the link.</p>
  
  <p>Here's all of my navbar HTML:</p>
  
  <pre><code>&lt;div class="navbar navbar-fixed-top"&gt;
      &lt;div class="navbar-inner"&gt;
          &lt;div class="container"&gt;
              &lt;a class="brand" href="#"&gt;AuctionBase&lt;/a&gt;
              &lt;div class="nav-collapse"&gt;
                      &lt;ul class="nav"&gt;
                          &lt;li&gt;&lt;a href="home.php"&gt;Search&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="about.php"&gt;About&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>