title: Make clicked tab active in Bootstrap
body: <p>I am using Django and integrated Bootstrap with Django. Here is my HTML code for the navigation bar:</p>
  
  <pre><code>&lt;div class="navbar navbar-default navbar-fixed-top" role="navigation"&gt;
    &lt;div class="container"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
          &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;a class="navbar-brand" href="#"&gt;Project name&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="navbar-collapse collapse"&gt;
        &lt;ul class="nav navbar-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;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;li class="dropdown"&gt;
            &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Games &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
            &lt;ul class="dropdown-menu" role="menu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;RacingDNA&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Skater Game&lt;/a&gt;&lt;/li&gt;
  
            &lt;/ul&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have written the CSS for an active navigation bar also. Here, only one navigation bar is active. I want to make the clicked navigation bar active and thus apply my CSS. My CSS is working perfect for active navigation bar and for this situation only for one.</p>
  
  <p>I googled and found a solution to add this jQuery:</p>
  
  <pre><code>$('.nav.navbar-nav &gt; li').on('click', function (e) {
  e.preventDefault();
  $('.nav.navbar-nav &gt; li').removeClass('active');
  $(this).addClass('active');
  </code></pre>
  
  <p>});</p>
  
  <p>Now here is where I am stuck. I don't know where to write this jQuery.</p>
  
  <p>I put this file in the <code>static/js</code> folder and named this code <code>nav-bar.js</code>. However, there is no improvement. Where am I going wrong and where am I making mistakes?</p>