小编Nam*_*m L的帖子

无法在 Bootstrap 5 导航选项卡中的选项卡之间切换

我正在尝试创建一个登录页面,其中有两个选项卡。一个用于登录,另一个用于注册。我想在登录选项卡中显示用户名、密码,在注册选项卡中显示姓名、姓氏、电子邮件。我已经编写了代码,我可以看到这两个选项卡,但问题是,如果我将 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> …
Run Code Online (Sandbox Code Playgroud)

html tabs login-page twitter-bootstrap bootstrap-5

1
推荐指数
1
解决办法
4080
查看次数

标签 统计

bootstrap-5 ×1

html ×1

login-page ×1

tabs ×1

twitter-bootstrap ×1