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

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

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

<!-- 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

我的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
匿名

发表评论

匿名网友

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

确定