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