title: bootstrap navbar 'active' loses persistence if click on page
body: <p>This bootstrap navbar <code>active state</code> works great when clicked on, but if I click anywhere else on the page the <code>active state</code> turns off, it loses persistence. How can I fix this so that it only loses persistence when another navbar link is clicked on? Using <code>bootstrap.min.js</code> to drive the active links. Here's a fiddle: <a href="http://jsfiddle.net/SquareGiraffe/qdj4qo0u/" rel="nofollow">http://jsfiddle.net/SquareGiraffe/qdj4qo0u/</a></p>
  
  <pre><code>    &lt;nav class="navbar navbar-inverse navbar-fixed-top"&gt;
        &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
            &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&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;/div&gt;
          &lt;div id="navbar" class="navbar-collapse collapse"&gt;
            &lt;ul class="nav navbar-nav"&gt;
              &lt;li&gt;&lt;a href="#welcome"&gt;Welcome&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#2"&gt;Two&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#3"&gt;Three&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#4"&gt;Four&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#5"&gt;Five&lt;/a&gt;&lt;/li&gt; 
              &lt;li&gt;&lt;a href="#faq"&gt;FAQ&lt;/a&gt;&lt;/li&gt; 
              &lt;li&gt;&lt;a href="#6"&gt;Six&lt;/a&gt;&lt;/li&gt; 
              &lt;li&gt;&lt;a href="#7"&gt;Seven&lt;/a&gt;&lt;/li&gt; 
  
            &lt;/ul&gt;
  
          &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
  </code></pre>