切换语言为:繁体

使用 Bootstrap 的 nav-tabs 和 tab-content 组件时,页面中的切换菜单无法正常响应切换事件

  • 爱糖宝
  • 2024-11-12
  • 2040
  • 0
  • 0

在使用 Bootstrap 的 nav-tabs 和 tab-content 组件时,页面中的切换菜单无法正常响应切换事件,可能是因为以下几点问题:

1. 缺少 Bootstrap 的 JavaScript 文件:Bootstrap 的 tab 切换功能依赖 JavaScript,如果没有引入 bootstrap.bundle.min.js,切换事件不会生效。(常识问题)

2. tab-content 内 tab-pane 的 id 使用方式:data-bs-target 和 tab-pane 的 id 中不需要 # 符号。data-bs-target 应该直接引用 id,而不是带有 # 符号的字符串。(粗心问题)

修改建议

    以下是对代码的调整:

    1. 确保引入 Bootstrap 的 JavaScript 文件

    在 HTML 文件中,确保在 <head> 或页面底部引入 Bootstrap 的 JavaScript 文件:

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

    2. 修复 data-bs-target 和 id 的使用方式

    修改 data-bs-target 和 tab-pane 的 id 中的 # 符号,改为直接使用 id 名称。例如下面的例子中,如果把id写为「#nav-home」就会出问题,一定要小心,下面是正确的举例。

    <nav>   
    <div class="nav nav-tabs" id="nav-tab" role="tablist">     
        <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">
            Home
        </button>
   </div> 
</nav> 
<div class="tab-content" id="nav-tabContent">   
    <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">...</div>
</div>

解释

     • 移除 # 符号:将 data-bs-target 和 tab-pane 的 id 直接设置为字符串拼接的结果,不带 # 符号。

     • Bootstrap JavaScript 文件:确保正确引入了 Bootstrap 的 JavaScript 依赖。

应用以上调整后,应该能正常响应切换事件。如果依然存在问题,可以检查浏览器控制台是否有报错信息

0条评论

您的电子邮件等信息不会被公开,以下所有项均必填

OK! You can skip this field.