javascript - 为什么导航选项卡和选项卡 Pane 不起作用？

Question

我对导航选项卡和选项卡 Pane 有疑问。 我已成功实现导航选项卡，但选项卡 Pane 无法正常工作。 当我单击第二个导航选项卡时，相应的内容不会出现。好吧，我是引导学习设计内容的好方法的新手。请回答我被困在那里，没有找到任何解决方案。

这是代码:

<div class="row row-content">
    <div class="col-12">
        <h2>Corporate Leadership</h2>
        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a class="nav-link active" href="#peter" role="tab" data-toggle="tab">Peter Pan, CEO</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#danny" role="tab" data-toggle="tab">Dhanasekaran Witherspoon, CFO</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#agumbe" role="tab" data-toggle="tab">Agumbe Tang, CTO</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#alberto" role="tab" data-toggle="tab">Alberto Somayya, EC</a>
            </li>
        </ul>

        //from here my tab pane content started

        <div class="tab-content">
            <div role="tabpanel" class="tab-pane fade show active" id="peter">
                <h3>Peter Pan <small>Chief Epicurious Officer</small></h3>
                <p class="d-none d-sm-block">Our CEO, Peter, credits his hardworking East Asian immigrant parents who undertook the arduous journey to the pioneering cross-cultural culinary connections.</p>
            </div>
            <div role="tabpanel" class="tab-pane fade" id="danny">
                <h3>Dhanasekaran Witherspoon <small>Chief Food Officer</small></h3>
                <p class="d-none d-sm-block">Our CFO, Danny, as he is
                    <em>Everything that runs, wins, and everything that stays, pays! 
      </em></p>
            </div>
            <div role="tabpanel" class="tab-pane fade" id="agumbe">
                <h3>Agumbe Tang <small>Chief Taste Officer</small></h3>
                <p class="d-none d-sm-block">Blessed with the most discerning gustatory.
                    <em>You click only if you survive my lick.</em></p>
            </div>
            <div role="tabpanel" class="tab-pane fade" id="alberto">
                <h3>Alberto Somayya <small>Executive Chef</small></h3>
                <p class="d-none d-sm-block">Award winning three-star Michelin chef with you get a winning hit! Amma Mia!</em>
                </p>
            </div>
        </div>
    </div>
</div>

Answer 1

您应该包含 Bootstrap JS 和 Jquery 才能使其正常工作。请参阅下面的演示

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="row row-content">
    <div class="col-12">
        <h2>Corporate Leadership</h2>
        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a class="nav-link active" href="#peter" role="tab" data-toggle="tab">Peter Pan, CEO</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#danny" role="tab" data-toggle="tab">Dhanasekaran Witherspoon, CFO</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#agumbe" role="tab" data-toggle="tab">Agumbe Tang, CTO</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#alberto" role="tab" data-toggle="tab">Alberto Somayya, EC</a>
            </li>
        </ul>

        //from here my tab pane content started

        <div class="tab-content">
            <div role="tabpanel" class="tab-pane fade show active" id="peter">
                <h3>Peter Pan <small>Chief Epicurious Officer</small></h3>
                <p class="d-none d-sm-block">Our CEO, Peter, credits his hardworking East Asian immigrant parents who undertook the arduous journey to the pioneering cross-cultural culinary connections.</p>
            </div>
            <div role="tabpanel" class="tab-pane fade" id="danny">
                <h3>Dhanasekaran Witherspoon <small>Chief Food Officer</small></h3>
                <p class="d-none d-sm-block">Our CFO, Danny, as he is
                    <em>Everything that runs, wins, and everything that stays, pays! 
      </em></p>
            </div>
            <div role="tabpanel" class="tab-pane fade" id="agumbe">
                <h3>Agumbe Tang <small>Chief Taste Officer</small></h3>
                <p class="d-none d-sm-block">Blessed with the most discerning gustatory.
                    <em>You click only if you survive my lick.</em></p>
            </div>
            <div role="tabpanel" class="tab-pane fade" id="alberto">
                <h3>Alberto Somayya <small>Executive Chef</small></h3>
                <p class="d-none d-sm-block">Award winning three-star Michelin chef with you get a winning hit! Amma Mia!</em>
                </p>
            </div>
        </div>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>