Html Bootstrap 4导航数据集';当进入第二次时,不响应
我正在创建一个引导页面,在两个html表单之间切换导航药丸Html Bootstrap 4导航数据集';当进入第二次时,不响应,html,css,node.js,bootstrap-4,Html,Css,Node.js,Bootstrap 4,我正在创建一个引导页面,在两个html表单之间切换导航药丸 <ul class="nav nav-pills my-5 d-flex justify-content-center" id="pills-tab" role="tablist"> <li class="nav-item"> <a class="nav-link active btn-lg" href="#login" id="pil
<ul class="nav nav-pills my-5 d-flex justify-content-center" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active btn-lg" href="#login" id="pills-login-tab" data-toggle="pill" role="tab">Log-in</a>
</li>
<span class="mx-3 d-flex align-items-center"><h5><small>or</small></h5></span>
<li class="nav-item">
<a class="nav-link btn-lg" href="#register" id="pills-register-tab" data-toggle="pill" role="tab">Register</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<!--Log-in-->
<div class="tab-pane fade show active col-6 mx-auto" id="login" role="tabpanel">
<form action="login.php" method="post">
<input class="d-none" name="action" value="login" viewonly>
<!--Email-->
<div class="form-group">
<label for="email">Email</label>
<input class="form-control " type="email" id="email" name="email" value="" required>
<div class="invalid-feedback">
</div>
</div>
<!--Password-->
<div class="form-group">
<label for="password">Password</label>
<input class="form-control" type="password" id="password" name="password" required>
<div class="invalid-feedback">
</div>
</div>
<!--Submit-->
<input class="btn btn-primary" type="submit" id="submit">
</form>
</div><!--Log-in-->
<!--Register-->
<div class="tab-pane fade" id="register" role="tabpanel">
<form class=" col-6 mx-auto" action="login.php" method="post">
<input class="d-none" name="action" value="register" viewonly>
<!--Name-->
<div class="form-group" id="name-form">
<label for="name">Name</label>
<input class="form-control" type="text" id="name" name="name" required>
<div class="invalid-feedback">
</div>
</div>
<!--Username-->
<div class="form-group" id="username-form">
<label for="username">Username</label>
<input class="form-control" type="text" id="username" name="username" required>
<div class="invalid-feedback">
</div>
</div>
<!--Email-->
<div class="form-group" id="email-form">
<label for="email">Email </label>
<input class="form-control" type="email" id="email" name="email" required>
<div class="invalid-feedback">
</div>
</div>
<!--Password-->
<div class="form-group" id="password-form">
<label for="password">Password</label>
<input class="form-control" type="password" id="password" name="password" required>
<div class="invalid-feedback">
</div>
</div>
<!--Repeat Password-->
<div class="form-group" id="repeat-password-form">
<label for="rep-password">Repeat Passwords</label>
<input class="form-control" type="password" id="repeat-password" required>
<div class="invalid-feedback">
</div>
</div>
<!--Submit-->
<input class="btn btn-primary" type="submit" id="submit">
</form>
</div><!--Register-->
</div><!--Pills-->
-
或
-
电子邮件
密码
名称
用户名
电子邮件
密码
重复密码
我注意到,我第一次访问该页面时,一切都正常,但如果我进入主页(或只是刷新),然后再回到该页面,nav将不再正常工作
我还注意到,如果我选择第一个选项(默认)并刷新它,它就会工作
我真的不知道该怎么办
我正在使用Node作为后端。您的代码看起来正常且正确。但是你有很多重复的ID,比如“email”、“password”、“submit”。ID在DOM中应该是唯一的,否则可能会导致错误。纠正这个,也许一切都会好起来 您的代码可以与最新的jQuery和引导CDN配合使用
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
已更新
如果您的BS脚本工作正常-页面的URL不应在单击时更改。因此,在重新加载页面后,一切都应该正常工作。如果您的URL在单击pills时发生更改,则会有其他脚本对引导程序产生影响。是否有可能在内部链接更改(例如,我转到#注册)然后刷新时,它会假定nav处于默认位置(#登录),而不是(仍然在#注册中)?我已对此进行了测试。如果您的BS脚本工作正常-页面的URL不应在单击时更改。因此,在重新加载页面后,一切都应该正常工作。如果您的URL在单击pills时发生更改,则会有其他脚本对bootsrap产生影响。你有活生生的例子吗?我实际上修改了代码,并制作了两个独立的页面。无论如何谢谢你