3
选项卡会加载，但在单击无效选项卡时，它会加载该内容，并且仍然具有来自其他选项卡的内容。所有来自其他标签的内容在点击该标签时加载。Twitter Bootstrap选项卡 - 不隐藏每个选项卡上的内容点击
链接到HTML：http://stl-sportszone.com/taco/
HTML - 加载默认BS NAV-标签。
<div class="row">
<div class="span4">
<h2>Your Brands</h2>
</div>
<div class="span12">
<ul class="nav nav-tabs">
<li class="active"><a href="#pane1" data-toggle="tab">Sewing</a></li>
<li><a href="#pane2" data-toggle="tab">Vacs</a></li>
<li><a href="#pane3" data-toggle="tab">Commerical</a></li>
<li><a href="#pane4" data-toggle="tab">Fans</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="pane1">
<div class="row">
<div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
<div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
<div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
<div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
</div>
<div class="spacer10"></div>
<div class="row">
<div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
<div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
<div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
<div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
</div>
</div>
</div>
<div class="tab-content">
<div class="tab-pane" id="pane2">
<div class="row">
<div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
<div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
<div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
<div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
</div>
</div>
</div>
<div class="tab-content">
<div class="tab-pane" id="pane3">
<div class="row">
<div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
<div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
<div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
<div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
</div>
</div>
</div>
<div class="tab-content">
<div class="tab-pane" id="pane4">
<div class="row">
<div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
<div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
<div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
<div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
</div>
</div>
</div>
</div>
</div>
</div> <!-- /container -->
的Javascript
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- Bootstrap JS: compiled and minified -->
<script src="js/bootstrap.min.js"></script>