twitter-bootstrap - Twitter Bootstrap 选项卡 - 单击时不隐藏每个选项卡中的内容

Question

选项卡会加载，但在单击非活动选项卡时，它会加载该内容并且仍然具有来自另一个选项卡的内容。单击该选项卡即可加载其他选项卡中的所有内容。

链接到 HTML：http ://stl-sportszone.com/taco/

HTML - 加载默认的 BS 导航选项卡。

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

Answer 1

你所有div.tab-pane的应该在一个单一的div.tab-content。

<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>
      <div class="tab-pane" id="pane2">
        ...
      </div>
      <div class="tab-pane" id="pane3">
        ...
      </div>
      <div class="tab-pane" id="pane4">
        ...
      </div>
    </div>
  </div>
</div>