title: Bootstrap: Links to tabs in navigation bars stay active even when tab changes
body: <p>I have multiple navigation bars in one page:</p>
  
  <pre><code>&lt;ul class="nav nav-tabs"&gt;
    &lt;li&gt;&lt;a href="#home" data-toggle="tab"&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#about" data-toggle="tab"&gt;About&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul class="nav nav-tabs"&gt;
    &lt;li&gt;&lt;a href="#home" data-toggle="tab"&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#about" data-toggle="tab"&gt;About&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The status of a LI element becomes <em>active</em> when the belonging link was clicked. Problem: It stays <em>active</em> even when the user switches the tab in the other navigation.</p>
  
  <p>It is not possible to switch back in the first navigation as the LI is already <em>active</em> there and can not be clicked. Things get even worse if you add a <em>div.collapse.navbar-collapse</em> in the main navigation bar and a simple link somewhere in the page:</p>
  
  <pre><code>&lt;p&gt;&lt;a data-toggle="tab" href="#about"&gt;About&lt;/a&gt;&lt;/p&gt;
  </code></pre>