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 正确切换

我已经更改了代码段，它现在可以工作了。 请通过此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>