title: Bootstrap navbar make clicked tab to be active
body: <p>I've read other similar posts, but I can't make mine working.
  I want to make the clicked tab to be active</p>
  
  <p>So here is how my bootstrap navbar looks like in html:</p>
  
  <pre><code>&lt;div class="navbar navbar-default" 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 href="/"&gt;
            &lt;img src="/static/images/logo.png" alt="Prime Solutions"/&gt;
          &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;&lt;strong&gt;Acasa&lt;/strong&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="/software"&gt;&lt;strong&gt;Software&lt;/strong&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="/hardware"&gt;&lt;strong&gt;Hardware&lt;/strong&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="/about"&gt;&lt;strong&gt;Despre Noi&lt;/strong&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="/contact"&gt;&lt;strong&gt;Contact&lt;/strong&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li class="dropdown"&gt;
              &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;&lt;strong&gt;Servicii&lt;/strong&gt;&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
              &lt;ul class="dropdown-menu"&gt;
                &lt;li&gt;&lt;a href="/servicii/servicii"&gt;Servicii IT&amp;C &lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="/servicii/consultanta"&gt;Consultanta IT&amp;C &lt;/a&gt;&lt;/li&gt;
                &lt;li class="divider"&gt;&lt;/li&gt;
                &lt;li class="dropdown-header"&gt;Parteneri&lt;/li&gt;
                &lt;li&gt;&lt;a href="/parteneri"&gt;Partenerii nostri&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
          &lt;ul class="nav navbar-nav navbar-right"&gt;
            &lt;li&gt;&lt;a class="btn btn-info" href="/noutati"&gt;&lt;span id="news"&gt;Noutati&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>However, it doesn't work. It only keeps my <code>Acasa</code> Tab to be active.
  How should I write the script? thanks</p>
  
  <p>This is how the bottom of my <code>&lt;body&gt;</code> looks like:</p>
  
  <pre><code>&lt;script src="/static/js/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="/static/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="/static/js/jquery-1.11.0.js"&gt;&lt;/script&gt;
  &lt;script&gt;
    ....... 
  &lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <p>This the the script I have tried:</p>
  
  <pre><code>&lt;script&gt;
    $('.nav.navbar-nav &gt; li').on('click', function() {
      $(this).addClass('active');
      $(this).siblings().removeClass('active');
    });    
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Ok, so I figure it out what the problem was. The jQuery works, but when I click, for example, the Software tab, I get redirected to /software and thus, the Software tab doesn't turn on active because of the redirect. This navigation bar appears on each of my pages. So how can I fix this issue?</p>