Question

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

<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>

Answer 1

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

您可以尝试使用标签事件删除活动状态，请参阅http://getbootstrap.com/javascript/#tabs。对于你的例子，这将是类似的东西;

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

Answer 2

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

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

});
});

Bootstrap：即使标签发生变化，导航栏中标签的链接也会保持活动状态

2 个答案: