Bootstrap选项卡-活动类无法在页面加载中使用 [英] Bootstrap tab - active class not working on page loading

问题描述

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

My code is below. Notice the tab 'one' is active. But the problem is when i open the page, the tab really shows active, BUT the tab content does not show ; it only shows when i click on the tab manually. How to fix this ?

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

推荐答案

还在选定的标签内容上添加类active

Add class active also on the selected tab content

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

看看这个: 小提琴

这篇关于Bootstrap选项卡-活动类无法在页面加载中使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！