Bootstrap: Links to tabs in navigation bars stay active even when tab changes - twitter-bootstrap-3

Question

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

Answer 1

In many cases different nav (with tabs) will open a new page or interact on difference elements in the page. In your case being active of nav1 only will be a problem when nav2 removes or change the content related to your nav1 active state.
You could try to remove the active states with the tab event, see http://getbootstrap.com/javascript/#tabs. For your example this will be come something like;
$('.nav').on('show.bs.tab', function (e) {
$('.nav .active').removeClass('active');
})

Answer 2

I think the best solution is to set the active class manually in all the navs after each tab switch.
$(function() {
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
// add active class where nav entry is active
$('.nav a[data-toggle="tab"][href="'+$(e.target).attr("href")+'"]')
.parent().addClass('active');
// remove active class where nav entry is no longer active
$('.nav a[data-toggle="tab"][href!="'+$(e.target).attr("href")+'"]')
.parent().removeClass('active');
});
});