Twitter Bootstrap 标签内容始终显示

Question

使用 Twitter Bootstrap 框架，我尝试使用选项卡功能有条件地显示一部分内容：http://getbootstrap.com/javascript/#tabs

我遇到的问题是 div class 编辑为 "tab-pane-active" 的内容总是出现，无论选择了哪个选项卡。（当其他标签被选中时，它们的内容会出现在这个div中的内容下方）

选项卡代码

<ul class="nav nav-tabs" role="tablist" style="margin-top:30px; margin-left:250px;">
 <li role="presentation" class="active"><a href="#t1" aria-controls="t1" role="tab" data-toggle="tab">Product Information</a></li>
 <li role="presentation"><a href="#t2" aria-controls="t2" role="tab" data-toggle="tab">Shipping Information</a></li>
 <li role="presentation"><a href="#t3" aria-controls="t3" role="tab" data-toggle="tab">Usage Instructions</a></li>
 <li role="presentation"><a href="#t4" aria-controls="t4" role="tab" data-toggle="tab">Testimonials</a></li>
 <li role="presentation"><a href="#t5" aria-controls="t5" role="tab" data-toggle="tab">FAQ</a></li>
</ul>

内容代码

<div class="tab-content">
  <div role="tabpanel" class="tab-pane-active" id="t1">
   <h3>Product Information</h3>
   <p>Product information here        
  </div>

  <div role="tabpanel" class="tab-pane" id="t2">
    <h3>Shipping Information</h3>
    <p>Shipping info here</p>
  </div>

  <div role="tabpanel" class="tab-pane" id="t3">
    <h3>Using Instructions</h3>
    <p>Usage info here</p>
  </div>

  <div role="tabpanel" class="tab-pane" id="t4">
    <h3>Testimonials</h3>
    <p>Testimonials here</p>
     </div>

  <div role="tabpanel" class="tab-pane" id="t5">      
    <h3>FAQ</h3>
    <p>FAQ here</p>
  </div>
</div>

如果我将 class "tab-pane-active" 更改为 "tab-pane"，这些选项卡会按预期工作，但是第一个 div 中的内容默认情况下不会显示应该。

我已经在我网站的其他地方成功使用了此功能，语法没有差异，但无法确定为什么它在这里不起作用。

Answer 1

这是因为 class 是 tab-pane active 你的 div 有 class 的 tab-pane-active

<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="t1">
   <h3>Product Information</h3>
   <p>Product information here        
  </div>

  <div role="tabpanel" class="tab-pane" id="t2">
    <h3>Shipping Information</h3>
    <p>Shipping info here</p>
  </div>

  <div role="tabpanel" class="tab-pane" id="t3">
    <h3>Using Instructions</h3>
    <p>Usage info here</p>
  </div>

  <div role="tabpanel" class="tab-pane" id="t4">
    <h3>Testimonials</h3>
    <p>Testimonials here</p>
     </div>

  <div role="tabpanel" class="tab-pane" id="t5">      
    <h3>FAQ</h3>
    <p>FAQ here</p>
  </div>
</div>

Twitter Bootstrap 标签内容始终显示

Twitter Bootstrap Tab Content Always Showing

html

javascript

shopify

twitter-bootstrap