如何让Bootstrap导航药丸标签链接和页面链接同时工作
我使用的是Bootstrap Nav-Pills，在其中我需要使用链接，这些链接既可以指向同一页面上的不同标签/药丸，也可以指向同一站点上的不同页面(有些带有锚定标记)。
最初，到其他页面的链接工作得很好，但是我需要添加JS (我不知道--谢谢，Stack Overflow的代码)，才能使到其他选项卡/药丸的链接起作用。现在已经添加了JS (它可以很好地实现标签/药丸链接)，指向其他页面的链接也不再有效。
示例:在下面的“一般信息”部分，“类别”选项卡/药丸链接(#tab-4)需要代码底部的JS才能工作，但相同的代码会禁用"email our office“(contact.htm#email)链接。
<body>
<div id="tabs">
<ul class="nav nav-pills">
<li class="active"><a href="#tab-1" data-toggle="tab">General</a></li>
<li class=""><a href="#tab-2" data-toggle="tab">Age Groups</a></li>
<li class=""><a href="#tab-3" data-toggle="tab">Divisions</a></li>
<li class=""><a href="#tab-4" data-toggle="tab">Categories</a></li>
<li class=""><a href="#tab-5" data-toggle="tab">Entry Fees</a></li>
</ul>
<div class="tab-content">
<div id="tab-1" class="tab-pane active">
<h2>GENERAL INFORMATION</h2>
<p>Contestants may enter as many <a href="#tab-4">categories</a> as desired but each routine must be different.</p>
<p><i>If you have any questions, please <a href="contact.htm#email">email our office</a>.</i></p>
</div>
<div id="tab-2" class="tab-pane">
<h2>AGE GROUPS</h2>
</div>
<div id="tab-3" class="tab-pane">
<h2>DIVISIONS</h2>
</div>
<div id="tab-4" class="tab-pane">
<h2>CATEGORIES</h2>
</div>
<div id="tab-5" class="tab-pane">
<h2>ENTRY FEES</h2>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#tabs a').click(function (e) {
e.preventDefault();
$('a[href="' + $(this).attr('href') + '"]').tab('show');
})
});
</script>
<script type="text/javascript">
$(function() {
var hash = window.location.hash;
// do some validation on the hash here
hash && $('ul.nav a[href="' + hash + '"]').tab('show');
});
</script>
</body>我仍然在寻找解决方案--无可否认，我是一个JS newbee。虽然我继续我的搜索，如果任何JS专家如何更新现有的JS，以便我可以链接到标签/药丸和其他页面，将非常感谢！
回答 2
Stack Overflow用户
发布于 2019-08-25 12:59:17
我想这对你有帮助。
<div id="tab-1" class="tab-pane active">
<h2>GENERAL INFORMATION</h2>
<p>Contestants may enter as many <a href="#tab-4">categories</a> as desired...</p>
<p><i>If... please <a class="cemail" href="#email">email our office</a>.</i></p>
</div>jQuery：
$(".cemail").click(function(e) {
window.location.hash = $(this).attr("href");
e.preventDefault();
});Stack Overflow用户
发布于 2019-08-26 04:39:36
我想通了！感谢完美主义者先生激发了我所需要的东西。
我需要更改第一个脚本，以便可以将其用作类。具体如下：(1)将：'#tabs a‘更改为'.tabsclick’(2)在正文中的categories链接中添加: class="tabsclick“
https://stackoverflow.com/questions/57642573
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号