html-无法在bootstrap 5 nav选项卡中的选项卡之间切换-堆栈溢出

顺晟科技

2022-10-19 11:40:16

114

我正在尝试创建一个登录页面，其中将有两个选项卡。一个用于登录，另一个用于注册。我想在登录选项卡中显示用户名，密码，在注册选项卡中显示姓名，姓氏，电子邮件。我已经写了代码，我可以看到这两个选项卡，但问题是我不能在它们之间切换，如果我单独为登录选项卡保留class=“nav-link active”，那么它只是显示，即使我可以看到和触摸注册选项卡，我没有切换。当我单独保留class=“nav-link active”注册选项卡时，也会发生同样的情况，登录选项卡是不可访问的。我希望我已经解释清楚了，请随时开导我。欢迎各种回复。谢谢。 HTML代码:

<body>
<div class="container">
        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a class="nav-link active" href="#login-contents" id="login-tab">Log In</a>
            </li>
            <li class="nav-item" >
                <a class="nav-link" href="#register-contents" id="register-tab">Register</a>
            </li>
        </ul>
        <div class="tab-content">
            <div id="login-contents" class="tab-pane active">
                <table>
                    <tr>
                        <td>Username :</td>
                        <td><input type="text" id="ip-username" placeholder="Username"></td>
                    </tr>
                    <tr>
                        <td>Password :</td>
                        <td><input type="text" placeholder="Password" id="ip-password"></td>
                    </tr>
                </table>
            </div>
            <div id="register-contents" class="tab-pane fade">
                <table>
                    <tr>
                        <td>Name :</td>
                        <td><input type="text" placeholder="First Name" id="ip-f-name"></td>
                    </tr>
                    <tr>
                        <td>Last Name :</td>
                        <td><input type="text" placeholder="Last Name" id="ip-l-name"></td>
                    </tr>
                    <tr>
                        <td>E-Mail :</td>
                        <td><input type="text" placeholder="Your E-Mail Id" id="ip-e-mail"></td>
                    </tr>
                    <tr>
                        <td>A OTP will be sent to your mail id for verification.</td>
                        <td><Button class="btn btn-success" id="register-btn">Register</Button></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</body>

顺晟科技：

使用选项卡组件和标记为Bootstrap 5文档中显示的

代码中没有触发选项卡的内容。

您的代码只需向每个s

添加

上一篇：JavaScript-如何选择下拉菜下一篇：html-summary标记显示“详

网站建设

Html

html-无法在bootstrap 5 nav选项卡中的选项卡之间切换-堆栈溢出