我的Bootstrap选项卡无法点击。为什么？

huangapple
go评论104阅读模式
英文:

My Bootstrap tabs are not clickable. Why is that?

问题

你的标签不可点击的问题可能与你的 Bootstrap 版本以及相关 JavaScript 脚本的导入有关。请确保你的 Bootstrap 版本与你所使用的代码和示例相匹配。此外，你需要确保以下 JavaScript 库的导入正确，这些库是使 Bootstrap 的标签功能正常工作所必需的：

  1. jQuery
  2. Popper.js
  3. Bootstrap.js

你的代码中似乎导入了 Bootstrap 4.3.1 版本的 JavaScript，但你在示例中使用的是 Bootstrap 5 的代码。请检查你是否使用了正确版本的 Bootstrap，确保导入的 JavaScript 库与该版本兼容。

如果你的 Bootstrap 版本和 JavaScript 库导入都正确，但问题仍然存在，建议检查浏览器的开发者工具控制台，看是否有任何错误消息，这有助于进一步诊断问题。

英文:

I'm writing a Bootstrap website. I made some progress but occasionally face some issues I can't resolve on my own. For example, I added a set of tabs which are supposed to be interactive, but they aren't. What irks me is that my code is apparently identical to what w3schools show. Here's my code

  1. <!-- yes, it's tabs inside another tab -->
  2. <div id="admin-tab" class="col-sm-11 m-1">
  3. <!-- I commented out this div wrap just to see whether it helps, it doesn't -->
  4. <!--            <div class="row">-->
  5.                 <ul class="nav nav-tabs m-1">
  6.                     <li class="nav-item">
  7.                         <a class="nav-link active" data-bs-toggle="tab" href="#users-table">All Users</a>
  8.                     </li>
  9.                     <li class="nav-item">
  10.                         <a class="nav-link" data-bs-toggle="tab" href="#add-new-user">Add New User</a>
  11.                     </li>
  12.                 </ul>
  13. <!--            </div>-->
  14.             <div class="tab-content">
  15.                 <div id="users-table" class="tab-pane container active table-responsive">
  16.                     <table class="table table-hover text-center">
  17.                         <!-- here goes the table -->
  18.                     </table>
  19.                 </div>
  20.                 <div id="add-new-user" class="tab-pane container">
  21.                     <!-- here goes the add-new-user content -->
  22.                 </div>
  23.             </div>
  24.         </div>

Here's w3's code

  1. <!-- Nav tabs -->
  2. <ul class="nav nav-tabs">
  3.   <li class="nav-item">
  4.     <a class="nav-link active" data-bs-toggle="tab" href="#home">Home</a>
  5.   </li>
  6.   <li class="nav-item">
  7.     <a class="nav-link" data-bs-toggle="tab" href="#menu1">Menu 1</a>
  8.   </li>
  9.   <li class="nav-item">
  10.     <a class="nav-link" data-bs-toggle="tab" href="#menu2">Menu 2</a>
  11.   </li>
  12. </ul>
  14. <!-- Tab panes -->
  15. <div class="tab-content">
  16.   <div class="tab-pane container active" id="home">...</div>
  17.   <div class="tab-pane container fade" id="menu1">...</div>
  18.   <div class="tab-pane container fade" id="menu2">...</div>
  19. </div>

Considering the fact that the pieces are the same, it may have something to do with my <script> imports, but Claude (a chat bot) says they are fine

  1. <!-- I decided to show you my head element too, just in case -->
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  5.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
  6.           integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  7.     <title>Admin Page</title>
  8. </head>
  9. <body>
  10. <!-- some body code -->
  11. <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
  12.         integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
  13.         crossorigin="anonymous"></script>
  14. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
  15.         integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
  16.         crossorigin="anonymous"></script>
  17. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
  18.         integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
  19.         crossorigin="anonymous"></script>
  20. <!-- the imports are just at the end of the body -->
  21. </body>

I tried double-checking my code to see how it corresponds to the w3schools instructions. I also checked this and this posts, but they appear outdated and (no longer) relevant

Why are my tabs not clickable and how to I fix it?

答案1

得分: 0

你遇到的问题与你在学习Bootstrap 5教程时导入了Bootstrap 4有关。

具体而言，你的Bootstrap 4脚本不理解data-bs-toggle是什么。

如果你将它更改为data-toggle，它将正常工作。

英文:

The problem you experienced has to do with the fact that you're following a Bootstrap 5 tutorial while having a Bootstrap 4 import

  1. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
  2.         integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
  3.         crossorigin="anonymous"></script>

In particular, your Bootstrap 4 script doesn't get what on earth data-bs-toggle is

  1. <li class="nav-item">
  2.                         <a class="nav-link" data-bs-toggle="tab" href="#add-new-user">Add New User</a>
  3.                     </li>

If you change it to data-toggle="tab", it'll work like a charm

我的Bootstrap选项卡无法点击。为什么？

Now, if you're interested in why they changed data-toggle to data-bs-toggle in Bootstrap 5, you may want to read this commit commentary

> Data attributes for all JavaScript plugins are now namespaced to help distinguish Bootstrap functionality from third parties and your own code. For example, we use data-bs-toggle instead of data-toggle.

huangapple
  • 本文由 发表于 2023年4月4日 05:07:48
  • 转载请务必保留本文链接：https://go.coder-hub.com/75923780.html
  • bootstrap-4
  • html
  • java
  • javascript
  • spring-mvc
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定