Bootstrap nav-tabs和活动链接

Question

我遇到了bootstrap4导航栏和活动标签的问题。单击时选项卡和内容不活动，但是当我通过在每个选项卡上放置活动类时单独调用它们。

<div class="row">
    <div class= "col">
        <h2>Super world Leadership</h2>
        <ul class="nav nav-tabs">
            <li class="nav-item">
              <a class="nav-link active" href="#ironman"
                role="tab" data-toggle="tab">iron man, CEO</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#spiderman" role="tab"
                data-toggle="tab">spiderman, CFO</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#batman"role="tab"
                data-toggle="tab">batman, CTO</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#hulk" role="tab"
                data-toggle="tab">hulk, Exec. Chef</a>
            </li>
        </ul>

        <div class="tab-content">
            
            <div role="tabpanel" class="tab-pane fade show active" id="ironman">
                <h3>iron man <small>Chief Epicurious Officer</small></h3>
                <p class="hidden-xs-down">Our CEO, ironman</p>
            </div>
            
            <div role="tabpanel" class="tab-pane fade" id="spiderman">
                <h3>spiderman <small>Chief Food Officer</small></h3>
                <p class="hidden-xs-down">Our CFO, spiderman, </p>
            </div>
            
            <div role="tabpanel" class="tab-pane fade" id="batman">
                <h3>batman <small>Chief Taste Officer</small></h3>
                <p class="hidden-xs-down">CTO </p>
            </div>
            
            <div role="tabpanel" class="tab-pane fade" id="hulk">
                <h3>hulk<small>Executive Chef</small></h3>
                <p class="hidden-xs-down">Award winning </p>
            </div>
        
        </div>
   
    </div>
</div>

有人可以在这里指导。

Answer 1

您错过了实际触发标签选择的部分。您需要使用javascript或使用数据切换属性。

在这里查看一些细节：

https://v4-alpha.getbootstrap.com/components/navs/#javascript-behavior