Question

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

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>

Twitter引导程序选项卡 - 单击时不隐藏每个选项卡中的内容

1 个答案: