javascript - Bootstrap javascript 标签卡

Question

我正在尝试使用 bootstrap 的卡片/选项卡功能来创建一个具有 3 个选项卡的表格卡片，每个选项卡对应于它自己的事件“卡片主体”

我当前的代码:

<div class="col-lg-8 col-md-12 col-sm-12">
      <div class="page-header">
        <h2>Social Media</h2>      
      </div>
      <div class="card text-center">
        <div class="card-header">
          <ul class="nav nav-tabs card-header-tabs">
            <li class="nav-item">
              <a class="nav-link active" href="#insta">Instagram</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#face">Facebook</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#twit">Twitter</a>
            </li>
          </ul>
        </div>
        <div class="card-body">
          <div id="insta">Instagram</div>
          <div id="face">Facebook</div>
          <div id="twit">Twitter</div>
        </div>
      </div>
      <!-- END WIDGET 2 -->
    </div>

$(document).ready(function(){
$(".nav-tabs a").click(function(){
    $(this).tab('show');
});
});

正确创建卡片，并且它确实显示了相应的选项卡标题及其各自的链接。

我想做的是，如果 Instagram 选项卡处于事件状态，它会显示文本“Instagram”。其他 2 个也是如此。目前它们只是非事件选项卡，主选项卡的主体显示所有三行文本。

JavaScript 看起来正确，但它只是没有正确制表

这是代码笔:

https://codepen.io/anon/pen/gKLJrm

Answer 1

您需要对具有 tab-content 和 tab-pane 的选项卡使用适当的标记才能使选项卡正常工作:https://getbootstrap.com/docs/4.0/components/navs/#javascript-behavior

(不需要jquery)

https://www.codeply.com/go/p5Zm4JA5jb

  <div class="card text-center">
        <div class="card-header">
            <ul class="nav nav-tabs card-header-tabs">
                <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#insta">Instagram</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#face">Facebook</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#twit">Twitter</a>
                </li>
            </ul>
        </div>
        <div class="tab-content card-body">
            <div id="insta" class="tab-pane active">Instagram</div>
            <div id="face" class="tab-pane">Facebook</div>
            <div id="twit" class="tab-pane">Twitter</div>
        </div>
  </div>

请注意，nav-link 和 tab-pane 都设置了 active 项。