Bootstrap Tab 药丸无法正常工作或与选项卡面板链接

Question

我在我的网站上创建了一个引导药丸，但它的工作方式与文档中显示的方式不同。当我单击药丸时，它不会打开特定的选项卡面板。这里附上代码。这里正在尝试在 div 中添加与以下特定内容链接的选项卡药丸。不知道代码中缺少什么，但是当我单击选项卡时，内容没有改变。

<script>
        $(".nav li a").on("click", function() {
            $(".nav li a").removeClass("active");
            $(this).addClass("active");
        });

    </script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>


<main role="main" class="container">

        <div class="text-center mt-5 pt-5">
            <h1>Verbal Ability :: Comprehension</h1>
            <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
        </div>

        <!--Test Links-->

        <div class="overflow-auto bg-light" style="height: 200px;">
            <ol class="nav nav-pills flex-column">

                <li class="nav-item">
                    <a class="nav-link active" href="#home" data-toggle="pill">Comprehension - Section 1</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#profile" data-toggle="pill">Comprehension - Section 2</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#" data-toggle="pill">Comprehension - Section 3</a>
                </li>


            </ol>

        </div>

        <div class="tab-content">
            <div id="home" class="tab-pane fade show active" role="tabpanel">Content 1</div>
            <div id="profile" class="tab-pane fade" role="tabpanel">Content 2</div>
        </div>

    </main><!-- /.container -->




<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

Answer 1

1. 您应该在加载 Bootstrap 之前加载 jQuery。请正确阅读文档。
2. 您添加类（“活动”）的脚本方法错误。 Bootstrap .tab("show") 提供了一个内置方法，该方法可以使选项卡根据给定的 ID 正确切换

我已经更改了 sn-p，它现在可以工作了。请通过此https://www.w3schools.com/bootstrap/bootstrap_ref_js_tab.asp 了解更多详细信息。

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

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>


<main role="main" class="container">

        <div class="text-center mt-5 pt-5">
            <h1>Verbal Ability :: Comprehension</h1>
            <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
        </div>

        <!--Test Links-->

        <div class="overflow-auto bg-light" style="height: 200px;">
            <ol class="nav nav-pills flex-column">

                <li class="nav-item">
                    <a class="nav-link active" href="#home" data-toggle="pill">Comprehension - Section 1</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#profile" data-toggle="pill">Comprehension - Section 2</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#third" data-toggle="pill">Comprehension - Section 3</a>
                </li>


            </ol>

        </div>

        <div class="tab-content">
            <div id="home" class="tab-pane fade show active" role="tabpanel">Content 1</div>
            <div id="profile" class="tab-pane fade" role="tabpanel">Content 2</div>
            <div id="third" class="tab-pane fade" role="tabpanel">Content 3</div>
        </div>

    </main><!-- /.container -->


<!-- jQuery should come before loading boostrap -->

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>