Question

我试图让Bootstrap标签字段正常工作，但我遇到了一些困难。

内容是每个div之间的标签，但我遇到的是每个标签的内容都显示在页面上，只是隐藏。因此，无论何时单击其中一个选项卡，它都会隐藏上面的内容，并取消隐藏其下方的内容，而不是正确切换。

在下面的屏幕截图中，您可以看到显示在#android-screenshots标签内容下方的#ios-screenshots标签中的内容，从而导致大量不必要的空白。

以下是我的标记：

<div id="mobile-splash-faq-screenshots" class="container-fluid">
  <div class="row">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
          <li role="presentation" class="active"><a href="#ios-screenshots" aria-controls="ios-screenshots" role="tab" data-toggle="tab">iOS Screenshots</a></li>
          <li role="presentation"><a href="#android-screenshots" aria-controls="android-screenshots" role="tab" data-toggle="tab">Android Screenshots</a></li>
          <li role="presentation"><a href="#faq" aria-controls="faq" role="tab" data-toggle="tab">FAQ</a></li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content">
          <div class="container">
            <div role="tabpanel" class="tab-pane active fade in" id="ios-screenshots">
              <div class="screenshots">

                <p class="excerpt text-center">Screenshots taken on an iPhone 4S.</p>

                <div class="col-sm-4">
                  <img class="img-responsive" src="${contextRoot}/resources/assets/img/mobile-splash/ios_screenshot_01.png" />
                </div>

                <div class="col-sm-4">
                  <img class="img-responsive" src="${contextRoot}/resources/assets/img/mobile-splash/ios_screenshot_02.png" />
                </div>

                <div class="col-sm-4">
                  <img class="img-responsive" src="${contextRoot}/resources/assets/img/mobile-splash/ios_screenshot_03.png" />
                </div>

                <div class="col-sm-4">
                  <img class="img-responsive" src="${contextRoot}/resources/assets/img/mobile-splash/ios_screenshot_02.png" />
                </div>

                <div class="col-sm-4">
                  <img class="img-responsive" src="${contextRoot}/resources/assets/img/mobile-splash/ios_screenshot_03.png" />
                </div>

                <div class="col-sm-4">
                  <img class="img-responsive" src="${contextRoot}/resources/assets/img/mobile-splash/ios_screenshot_01.png" />
                </div>

              </div>
            </div>

            <div role="tabpanel" class="tab-pane fade" id="android-screenshots">
              <div class="screenshots">

                <p class="excerpt text-center">Screenshots taken on a Google Nexus 6.</p>

                <div class="col-sm-4">
                  <img class="img-responsive" src="${contextRoot}/resources/assets/img/mobile-splash/android_screenshot_01.png" />
                </div>

                <div class="col-sm-4">
                  <img class="img-responsive" src="${contextRoot}/resources/assets/img/mobile-splash/android_screenshot_02.png" />
                </div>

                <div class="col-sm-4">
                  <img class="img-responsive" src="${contextRoot}/resources/assets/img/mobile-splash/android_screenshot_03.png" />
                </div>

                <div class="col-sm-4">
                  <img class="img-responsive" src="${contextRoot}/resources/assets/img/mobile-splash/android_screenshot_04.png" />
                </div>

                <div class="col-sm-4">
                  <img class="img-responsive" src="${contextRoot}/resources/assets/img/mobile-splash/android_screenshot_01.png" />
                </div>

                <div class="col-sm-4">
                  <img class="img-responsive" src="${contextRoot}/resources/assets/img/mobile-splash/android_screenshot_01.png" />
                </div>

              </div>
            </div>

            <div role="tabpanel" class="tab-pane fade" id="faq">

            </div>

          </div>
        </div>
  </div>
</div>

这就是我的Javascript的样子：

(function($) {

  $('.nav-tabs a').on('click', function (e) {
     e.preventDefault();
     $(this).tab('show');
 });

})(jQuery);

Answer 1

通过添加以下CSS来管理解决此问题：

  .tab-pane:not(.active) {
      display: none;
  }

Bootstrap选项卡内容没有正确隐藏

1 个答案: