引导导航选项卡和活动链接

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 它要么使用 data-toggle 属性。

查看这里了解一些详细信息：

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