Question

我的代码有点问题。选项卡加载，但是当我单击另一个非活动选项卡时，不会隐藏第一个选项卡的内容并显示两个选项卡的内容。有什么我能做的吗？非常感谢你！

    <ul style="list-style:none"class="available-tabs nav nav-tabs" id="tabs" data-tabs="tabs">
          <li class="active"> <a data-toggle="tab" href="#featured-tab-body">FEATURED PROJECTS</a></li>
          <li> <a data-toggle="tab" href="#available-latest-tab">LATEST PROJECTS </a> </li>
 </ul>
<div class="available-content tab-content container">
  <div id="available-featured-tab">
    <div class="featured-list-wrapper">
      <div class="row">
        <div class="col-md-12">
          <div class="featured-list-content">
            <div class="row featured-tab-head" style="color:black;height:40px">
              <div class="col-md-5 col-sm-5 col-xs-8">
                <h5> YAE</h5>
              </div>
              <div class="col-md-2 col-sm-2 hidden-xs">
                <h5>NAH</h5>
              </div>
              <div class="col-md-2 hidden-sm hidden-xs">
                <h5>HEY</h5>
              </div>
              <div class="col-md-1 col-sm-2 hidden-xs">
                <h5>YOU</h5>
              </div>
            </div>
            <div class="featured-tab-body tab-pane fade in active">
              sup
            </div>
          </div>
        </div>
    </div>
  </div>
  <div id="available-latest-tab" class="tab-pane fade">
    hi
  </div>
</div>

Answer 1

您需要将所有div内容放在同一根div下。所以不是：

<div class="available-content tab-content container">
    <div id="available-featured-tab">
        <div class="featured-list-wrapper">
            <div class="row">
                <div class="col-md-12">
                    <div class="featured-list-content">
                        <div class="featured-tab-body tab-pane fade in active">
                            sup
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="available-latest-tab" class="tab-pane fade">
        hi
    </div>
</div>

你需要：

<div class="available-content tab-content container">
    <div id="available-featured-tab">
        <div class="featured-list-wrapper">
            <div class="row">
                <div class="col-md-12">
                    <div class="featured-list-content">
                        <div class="featured-tab-body tab-pane fade in active">
                            sup
                        </div>
                        <div id="available-latest-tab" class="tab-pane fade">
                            hi
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

不需要Jquery，因为bootstrap为你工作。纠正小提琴： http://jsfiddle.net/xFW8t/1777/

Twitter Bootstrap标签不隐藏内容

1 个答案: