Question

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

我遇到的问题是，无论选择哪个标签，div中被归类为“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>

如果我将“tab-pane-active”类更改为“tab-pane”，则选项卡按预期工作，但默认情况下，第一个div中的内容不会显示。

我已经在我的网站上的其他地方成功使用了此功能，但语法没有区别，并且无法确定它在此处不起作用的原因。

Answer 1

这是因为班级tab-pane active你的div的班级为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选项卡内容始终显示

1 个答案: