Question

我有一个以BS3模式运行的标签，如下所示。

 <ul class="nav nav-tabs" id="ghTab">
                        <li class="active"><a href="#Step1" data-target=".Step1" data-toggle="tab">Step 1 of 5</a></li>
                        <li><a href="#Step2" data-target=".Step2" data-toggle="tab">Step 2 of 5</a></li>
                        <li><a href="#Step3" data-target=".Step3" data-toggle="tab">Step 3 of 5</a></li>
                        <li><a href="#Step4" data-target=".Step4" data-toggle="tab">Step 4 of 5</a></li>
                        <li><a href="#Step5" data-target=".Step5" data-toggle="tab">Step 5 of 5</a></li>
 </ul>

使用标签内容......

<div class="tab-content">
    <div class="tab-pane fade in active Step1">
    </div>
    <div class="tab-pane fade in active Step2">
    </div>
   <div class="tab-pane fade in active Step3">
    </div>
    <div class="tab-pane fade in active Step4">
    </div>
     <div class="tab-pane fade in active Step5">
    </div>
</div>

我已经注意到，当我点击一个标签时，它会随机显示2个标签窗格内容。如果我然后再单击另一个选项卡然后再返回问题得到纠正。

这可能是我正在使用的BS版本中的错误（Bootstrap v3.0.2）吗？

取值

Answer 1

您的所有标签内容div项目都是在和活动，这告诉bootstrap显示它们的onload ...您需要将标签类重组为如下所示：

<div class="tab-content">
<!-- Only the first one should be active as it will show on page load automaticall -->
    <div class="tab-pane fade in active Step1">
    </div>
    <div class="tab-pane fade Step2">
    </div>
   <div class="tab-pane fade Step3">
    </div>
    <div class="tab-pane fade Step4">
    </div>
     <div class="tab-pane fade Step5">
    </div>
</div>

Bootstrap 3选项卡显示2个选项卡窗格中的内容

1 个答案: