英文:
My Bootstrap tabs are not clickable. Why is that?
问题
你的标签不可点击的问题可能与你的 Bootstrap 版本以及相关 JavaScript 脚本的导入有关。请确保你的 Bootstrap 版本与你所使用的代码和示例相匹配。此外，你需要确保以下 JavaScript 库的导入正确，这些库是使 Bootstrap 的标签功能正常工作所必需的：
- jQuery
- Popper.js
- 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
<!-- yes, it's tabs inside another tab -->
<div id="admin-tab" class="col-sm-11 m-1">
<!-- I commented out this div wrap just to see whether it helps, it doesn't -->
<!-- <div class="row">-->
<ul class="nav nav-tabs m-1">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#users-table">All Users</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#add-new-user">Add New User</a>
</li>
</ul>
<!-- </div>-->
<div class="tab-content">
<div id="users-table" class="tab-pane container active table-responsive">
<table class="table table-hover text-center">
<!-- here goes the table -->
</table>
</div>
<div id="add-new-user" class="tab-pane container">
<!-- here goes the add-new-user content -->
</div>
</div>
</div>
Here's w3's code
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#menu1">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane container active" id="home">...</div>
<div class="tab-pane container fade" id="menu1">...</div>
<div class="tab-pane container fade" id="menu2">...</div>
</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
<!-- I decided to show you my head element too, just in case -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Admin Page</title>
</head>
<body>
<!-- some body code -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<!-- the imports are just at the end of the body -->
</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
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
In particular, your Bootstrap 4 script doesn't get what on earth data-bs-toggle is
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#add-new-user">Add New User</a>
</li>
If you change it to data-toggle="tab", it'll work like a charm
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论