Bootstrap选项卡 - 活动类不在页面加载上工作

Question

我的代码如下.注意标签'one'是活动的.但问题是当我打开页面时,标签真的显示活动,但标签内容没有显示; 它仅在我手动点击选项卡时显示.如何解决这个问题？

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

Answer 1

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

Answer 2

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>

看看这个: 小提琴

Answer 3

似乎在选项卡内容上使用"淡入淡出"和"活动"类的组合似乎与我对选项卡面板的特定用法相冲突.它仍然没有加载初始页面加载的内容.

一旦我删除了"淡入淡出",那么事情似乎有效.

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