Question

这是我的代码

<!-- Nav tabs -->
            <div class="container">
<ul class="nav nav-tabs" role="tablist">
  <li role="presentation" class=""><a href="#tab1" role="tab" data-toggle="tab">Tab1</a></li>
  <li role="presentation"><a href="#tab2" role="tab" data-toggle="tab">Tab2</a></li>
  <li role="presentation"><a href="#tab3" role="tab" data-toggle="tab">Tab3</a></li>
  <li role="presentation"><a href="#tab4" role="tab" data-toggle="tab">Tab4</a></li>
</ul>
</div>

<!-- Tab panes -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade" id="tab1">Texts</div>
  <div role="tabpanel" class="tab-pane fade" id="tab2">Some text</div>
  <div role="tabpanel" class="tab-pane fade" id="tab3">Just fill this pace</div>
  <div role="tabpanel" class="tab-pane fade" id="tab4">Some more texts</div>
</div>

淡入淡出不起作用，因为我移除了活动（我不希望任何标签在加载时处于活动状态），如何在不使用活动状态的情况下使淡入淡出效果。

Answer 1

从active移除nav，但不移除tab-content上的in ....要保持内容关闭，请移除课程 <div class="container"> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class=""><a href="#tab1" role="tab" data-toggle="tab">Tab1</a></li> <li role="presentation"><a href="#tab2" role="tab" data-toggle="tab">Tab2</a></li> <li role="presentation"><a href="#tab3" role="tab" data-toggle="tab">Tab3</a></li> <li role="presentation"><a href="#tab4" role="tab" data-toggle="tab">Tab4</a></li> </ul> </div>  <div class="tab-content"> <div role="tabpanel" class="tab-pane fade active" id="tab1">Texts</div> <div role="tabpanel" class="tab-pane fade" id="tab2">Some text</div> <div role="tabpanel" class="tab-pane fade" id="tab3">Just fill this pace</div> <div role="tabpanel" class="tab-pane fade" id="tab4">Some more texts</div> </div>：

{{1}}

选中 Demo

Bootstrap淡化选项卡不起作用

1 个答案: