模态弹窗中Bootstrap Tab新增忘记密码标签点击无响应问题咨询

问题说明 #

我在Codepen上找到了一段用于登录注册功能的、在模态弹窗（modal popup）内嵌Bootstrap标签页（Tab）的代码，原代码仅在模态弹窗内实现了登录（Login）、注册（Registration）两个标签页，我在此基础上新增了"Forgot Password（忘记密码）"标签页。
但出现的问题是forgot password标签完全无法正常工作，无法点击，点击后没有任何响应。

相关代码 #

@{
  ViewBag.Title = "Index";
  Layout = "~/Areas/Landing/Views/Shared/_LandingLayout.cshtml";
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div class="container mt-5 pt-5 modal" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
        <div class="card mx-auto  border-0" style="width: 24rem;">
            <div class="card-header border-bottom-0 bg-transparent">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <ul class="nav nav-tabs justify-content-center pt-4" id="pills-tab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active text-primary" id="pills-login-tab" data-toggle="pill" href="#pills-login" role="tab" aria-controls="pills-login" aria-selected="true">Login</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-primary" id="pills-forgotpassword-tab" data-toggle="pill" href="#pills-forgotpassword" role="tab" aria-controls="pills-forgotpassword" aria-selected="false">Forgot Password</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-primary" id="pills-register-tab" data-toggle="pill" href="#pills-register" role="tab" aria-controls="pills-register" aria-selected="false">Register</a>
                    </li>
                </ul>
            </div>
            <div class="card-body pb-4">
                <div class="tab-content" id="pills-tabContent">
                    <div class="tab-pane fade show active" id="pills-login" role="tabpanel" aria-labelledby="pills-login-tab">
                        @Html.Partial("~/Areas/Landing/Views/Account/_Login.cshtml")
                        @*<div id="partialSummaryDiv"> Html.RenderPartial("~/Areas/Landing/Views/Account/_Login.cshtml", Model);</div>*@
                    </div>
                    <div class="tab-pane fade" id="pills-register" role="tabpanel" aria-labelledby="pills-register-tab">
                        @Html.Partial("~/Areas/Landing/Views/Account/_Register.cshtml")
                    </div>
                    <div class="tab-pane fade" id="pills-forgotpassword" role="tabpanel" aria-labelledby="pills-forgotpassword-tab">
                        @Html.Partial("~/Areas/Landing/Views/Account/_Register.cshtml")
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

解决方案 #

1. 适配Bootstrap版本属性 #

Bootstrap 4和5的标签触发属性不兼容：

• 若使用Bootstrap 4：确保已经按顺序引入jQuery、Popper.js、Bootstrap 4 JS文件，三个文件缺一不可，顺序不能乱。
• 若使用Bootstrap 5：原data-toggle="pill"属性已废弃，需要替换为data-bs-toggle="pill"，所有标签项都要同步修改，示例如下：

<a class="nav-link text-primary" id="pills-forgotpassword-tab" data-bs-toggle="pill" href="#pills-forgotpassword" role="tab" aria-controls="pills-forgotpassword" aria-selected="false">Forgot Password</a>

2. 排查元素遮挡 #

按F12打开浏览器开发者工具，用元素选择器点击忘记密码标签，若无法直接选中该a标签，说明被上层元素遮挡，给标签加样式即可解决：

#pills-forgotpassword-tab {
  position: relative;
  z-index: 10;
}

3. 手动初始化标签组件 #

如果data属性触发失效，可直接加JS手动控制标签切换：

• Bootstrap 4 写法：

$('#pills-tab a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

• Bootstrap 5 写法：

const triggerTabList = document.querySelectorAll('#pills-tab a')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)
  triggerEl.addEventListener('click', event => {
    event.preventDefault()
    tabTrigger.show()
  })
})

4. 排查控制台报错 #

打开浏览器控制台（F12 → Console面板），查看是否有JS报错，比如$ is not defined、bootstrap is not defined这类错误，对应修复依赖引入问题即可。

内容的提问来源于stack exchange，提问作者devvab