Bootstrap 4 Nav Pills 在第二次进入时没有响应

Question

我正在创建一个带有导航药丸的引导页面，以在两个 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="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-->

我注意到，当我第一次访问该页面时，一切正常，但如果我转到主页（或当我只是刷新）然后返回此页面，导航就不再工作了。

我还注意到，如果我选择了第一个选项（默认）并刷新它就可以了。

我真的不知道该怎么办。

我使用 Node 作为后端。

Answer 1

您的代码看起来正常且正确。但是您有很多 ID 重复项，例如“电子邮件”、“密码”、“提交”。 ID 在 DOM 内部应该是唯一的，否则可能会导致错误。纠正这一点，也许一切都会好起来的。

您的代码在最新的 jQuery 和 Bootstrap 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 发生变化 - 还有一些其他脚本会影响引导程序。