我在Codepen的模态弹出框中发现了一个Bootstrap选项卡(用于登录注册)． 代码仅适用于两个选项卡-Login &注册-在一个模式弹出。所以，我为"忘记密码"添加了另一个标签。
但问题是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">×</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>
@{
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">×</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>
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Creating Dynamic Tabs in Bootstrap via Data attributes</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="card mx-auto border-0" style="width: 24rem;">
<div class="card-header border-bottom-0 bg-transparent">
<span aria-hidden="true">×</span>
</button>
<ul class="nav nav-tabs" id="myTab">
<li class="nav-item">
<a href="#home" class="nav-link active" data-bs-toggle="tab">Login</a>
</li>
<li class="nav-item">
<a href="#profile" class="nav-link" data-bs-toggle="tab">Forgot Password</a>
</li>
<li class="nav-item">
<a href="#messages" class="nav-link" data-bs-toggle="tab">Register</a>
</li>
</ul>
</div>
<div class="card-body pb-4">
<div class="tab-content">
<div class="tab-pane fade show active" id="home">
<h4 class="mt-2">Login</h4>
<p>Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.</p>
</div>
<div class="tab-pane fade" id="profile">
<h4 class="mt-2">Forgot Password</h4>
<p>Vestibulum nec erat eu nulla rhoncus fringilla ut non neque. Vivamus nibh urna, ornare id gravida ut, mollis a magna. Aliquam porttitor condimentum nisi, eu viverra ipsum porta ut. Nam hendrerit bibendum turpis, sed molestie mi fermentum id. Aenean volutpat velit sem. Sed consequat ante in rutrum convallis. Nunc facilisis leo at faucibus adipiscing.</p>
</div>
<div class="tab-pane fade" id="messages">
<h4 class="mt-2">Register</h4>
<p>Donec vel placerat quam, ut euismod risus. Sed a mi suscipit, elementum sem a, hendrerit velit. Donec at erat magna. Sed dignissim orci nec eleifend egestas. Donec eget mi consequat massa vestibulum laoreet. Mauris et ultrices nulla, malesuada volutpat ante. Fusce ut orci lorem. Donec molestie libero in tempus imperdiet. Cum sociis natoque penatibus et magnis.</p>
</div>
</div>
</div>
</div>
</body>
</html>对不起…我的错误. .我有一个javascript的模态弹出如下。有一个拼写错误——我键入了"忘记密码";而不是"忘记密码"。
$(() => {
$('a[href*="#"]:not([href="#"])').click((e) => {
if (e.target.innerHTML !== "Login" && e.target.innerHTML !== "Register"
&& e.target.innerHTML !== "Forgot Password")
{
const target = $(e.target.hash);
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
//debugger;
return false;
}
}
});
});