javascript - Bootstrap:如何添加指向导航选项卡的链接
问题描述
我有以下html代码:
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>
我希望当我单击第二个选项卡“个人资料”时,它会重定向到一个新链接(广告示例“myapp/test”)。
我怎么能做到?
解决方案
如果我错了,请纠正我:如果用户单击“个人资料”选项卡,则应该导航到另一个站点,而不是打开“个人资料”选项卡。
data-toggle
从元素中删除<a>
并将链接放在href
属性中。如果用户单击该元素,该data-toggle
属性会告诉 Bootstrap 要做什么。Bootstrap 使用 'href' 属性来查找相应的元素。
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="myapp/test" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>
推荐阅读
- flutter - Flutter:如何让尾随图标随 largeTitle 移动?
- javascript - 使用 jsonpath 提取 json 中的元素值
- reference - 参考文献没有出现在我的 Latex 书的 PDF 文件中
- powershell - 如何在 PowerShell 中列出具有长路径名的特定扩展名的文件而无需等待数小时
- docker - 如何在 Jenkins 中使用内部版本号对 docker 映像进行版本化以部署为 Kubernetes 部署?
- react-native - null 不是对象(评估“NativeUnimoduleProxy.viewMnagersNames”)
- python - 从打印输出中获取表格(熊猫)
- sql - 如何在 SQL SERVER 中删除重复行并保留具有特定值的单行
- ssh - 无法使用 ansible 从一个 ubuntu 虚拟机到另一个虚拟机建立 ssh 连接
- r - gganimate 动画滞后且不流畅