html - 无法在引导程序 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-link
s
<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>
推荐阅读
- python - 处理xml中属性的空白值
- couchdb - 无法添加用户
- android - 如何使用 RecyclerView 执行缓动滚动
- spring - 如何使用 Java Spring 启动缓存
- reactjs - React tic-tac-toe 教程 calculateWinner:函数与方法
- python - NumPy:可让我访问数组的“vectorize”的替代方案
- android - Dotfuscasor Xamarin Dotfocused assembles 与反编译 apk 中的不同
- android - Android R:启动默认启动活动不起作用
- java - 使用 Spring JPA 按名称 ASC 排序
- minizinc - 找到总和为 n 的最小的 alldifferent 数组