Twitter bootstrap 3 引导：导航栏中指向选项卡的链接即使在选项卡更改时也保持活动状态

我在一个页面中有多个导航栏：

<ul class="nav nav-tabs">
  <li><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#about" data-toggle="tab">About</a></li>
</ul>
<ul class="nav nav-tabs">
  <li><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#about" data-toggle="tab">About</a></li>
</ul>

单击所属链接时，LI元素的状态变为活动状态。问题：即使用户在其他导航中切换选项卡，它仍保持活动状态

无法在第一次导航中切换回，因为LI已在那里处于活动状态，无法单击。如果在主导航栏中添加div.collapse.navbar-collapse，并在页面的某个位置添加一个简单链接，情况会变得更糟：

<p><a data-toggle="tab" href="#about">About</a></p>

在许多情况下，不同的导航（带选项卡）将打开一个新页面或与页面中的不同元素交互。在您的情况下，当nav2删除或更改与您的nav1激活状态相关的内容时，仅激活nav1将是一个问题

您可以尝试使用tab事件删除活动状态，请参阅。对于你的例子，这将是类似的

    $('.nav').on('show.bs.tab', function (e) {
    $('.nav .active').removeClass('active');
})

---

在许多情况下，不同的nav（带选项卡）将打开一个新页面或与页面中的不同元素交互。在您的情况下，当nav2删除或更改与您的nav1激活状态相关的内容时，仅激活nav1将是一个问题

您可以尝试使用tab事件删除活动状态，请参阅。对于你的例子，这将是类似的

    $('.nav').on('show.bs.tab', function (e) {
    $('.nav .active').removeClass('active');
})

---

我认为最好的解决方案是在每个选项卡切换后在所有导航中手动设置活动类

$(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');

});
});

---

我认为最好的解决方案是在每个选项卡切换后在所有导航中手动设置活动类

$(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');

});
});