Nam*_*m L 1 html tabs login-page twitter-bootstrap 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>
</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>
您的代码只需添加data-bs-toggle="tab"到您的每个a.nav-links即可工作
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<div class="container">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#login-contents" id="login-tab" data-bs-toggle="tab">Log In</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#register-contents" id="register-tab" data-bs-toggle="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>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>| 归档时间： |
|
| 查看次数： |
4080 次 |
| 最近记录： |