引导选项卡 - 活动类在页面加载时不起作用

【问题标题】：Bootstrap tab - active class not working on page loading引导选项卡 - 活动类在页面加载时不起作用
【发布时间】：2015-11-11 18:40:42
【问题描述】：

我的代码如下。请注意选项卡“一个”处于活动状态。但问题是当我打开页面时，选项卡确实显示为活动状态，但选项卡内容不显示；它仅在我手动单击选项卡时显示。如何解决这个问题？

<ul class="nav nav-tabs">
  <li class="nav active"><a data-toggle="tab" href="#one">One</a>
  </li>
  <li class="nav"><a data-toggle="tab" href="#two">Two</a>
  </li>
</ul>

<div class="tab-content">

  <div class="tab-pane fade in" id="one">
    <p>Tab one content</p>
  </div>

  <div class="tab-pane fade in" id="two">
    <p>Tab two content</p>
  </div>

</div>

【问题讨论】：

标签： jquery css twitter-bootstrap

【解决方案1】：

在开始时添加“活动”类确实有效。

<ul class="nav nav-pills">
<li><a class="active nav-item nav-link" data-bs-toggle="pill" href="#tab1">Tab 1</a> </li>
<li> <a class="nav-link" data-bs-toggle="pill" href="#tab2">Tab 2</a> </li>
<li> <a class="nav-link" data-bs-toggle="pill" href="#tab3">Tab 3</a> </li>
</ul>

【讨论】：

欢迎来到 StackOverflow。您的答案似乎与接受的答案没有太大区别......

【解决方案2】：

有时当您尝试从后端获取值时，它仍有可能无法正常工作。尝试在active 旁边添加show：

<div class="tab-pane fade in active show" id="one">

【讨论】：

【解决方案3】：

对我有用的唯一方法是使用 JS。穿上第一件：

<li class="nav-item active"><a class="nav-link active" ....

还有这段代码：

$(".nav-tabs li a").click(function(){
  $(".nav-tabs li a").removeClass("active");
  $(this).addClass("active");
});

【讨论】：

非常感谢伙计！！几天以来我一直在尝试修复它。 HTML 是正确的，我找不到问题所在。我的代码的问题是，它将“活动”类添加到锚标记而不是
。我刚刚通过添加“parent()”来调整你的代码并且它起作用了。非常感谢。

【解决方案4】：

我遇到了同样的问题，但使用的是 navpills。

其他解决方案都不适合我。最后我用jquery解决了：

$(document).ready(function () 
{
    // somehow first navpill will not look active on page load (although it is...)
    $('.navpill.active').trigger('click');
});

我猜它对 navtabs 的工作方式相同，只使用 $('.nav.active') 来定位正确的元素。

【讨论】：

【解决方案5】：

似乎在选项卡内容上将“淡入淡出”与“活动”类结合起来似乎与我对选项卡面板的特定用法相冲突。它仍然没有在初始页面加载时加载内容。

一旦我删除了“淡入淡出”，一切似乎就奏效了。

<div class="tab-pane active" id="sales" role="tabpanel">

【讨论】：

感谢 Melanie Seifert，同意！！！在我的情况下，如果使用角度并动态添加选项卡内容，那么这将有所帮助。有用！！！

【解决方案6】：

在所选标签内容上也添加类active

<ul class="nav nav-tabs">
  <li class="nav active"><a data-toggle="tab" href="#one">One</a></li>
  <li class="nav"><a data-toggle="tab" href="#two">Two</a></li>
</ul>

<div class="tab-content">

  <!-- Show this tab by adding `active` class -->
  <div class="tab-pane fade in active" id="one">
    <p>Tab one content</p>
  </div>

  <!-- I removed `in` class here so it will have a fade in effect when showed -->
  <div class="tab-pane fade" id="two">
    <p>Tab two content</p>
  </div>

</div>

看看这个： Fiddle

【讨论】：

对于那些仍然无法正常工作的人，请参阅@jafaritaqi 的回答，您可以在其中删除选项卡上的“fade”类

【解决方案7】：

<div class="tab-pane fade in" id="one"> <p>Tab one content</p> </div>

把这个改成

<div class="tab-pane active in" id="one"> <p>Tab one content</p> </div>

【讨论】：

谢谢！接受的答案根本不起作用，我的代码一开始就是这样，删除“fade”就可以了