引导淡出选项卡不工作

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

从nav取出active但不是在tab-content ....要保持内容关闭删除类in：

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

入住这Demo