我使用Bootstrap的导航标签与以下设置：
<ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
</ul>
<div id="tabContent" class="tab-content">
<div class="tab-pane active in" id="home">
<form id="tab">
<label>Name:</label>
<input type="text" value="fooBar" class="input-xlarge">
</form>
</div>
<div class="tab-pane fade" id="profile">
<form id="tab2">
<a href="#home">Home</a>
</form>
</div>
</div>
您可以看到,我的个人资料标签中有一个链接,链接到第一个标签.点击锚点会更改URL栏中的URL,但不跳转到特定选项卡.
然后我注意到通常不可能直接链接到选项卡,所以我从Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink添加了以下代码：
// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
$('.nav-tabs a[href=#'+url.split('#')[1]+']').tab('show') ;
}
// Change hash for page-reload
$('.nav-tabs a').on('shown',function (e) {
window.location.hash = e.target.hash;
})
现在我可以从别的地方链接到一个特定的标签,但是如果我在导航栏的同一页面上,则不能.重新载入页面然后会跳转到所需的标签,所以我以为我可以强制重新加载页面,解决方案从Javascript: How to truly reload a site with an anchor tag?：
window.location.reload(true);
然而,每次点击一个标签时,它都会重新加载,此外,当点击锚点时,它仍然没有加载主页选项卡.
解决方法
你可能已经把错误的脚放在你提到的其他答案上了吗？从同一个页面中更改标签是不重要的(不管你是否在另一个选项卡中)：你可以使用基本的引导
tab navigation Javascript为此.
首先改变你的html：添加一个id到你的< ul class =“nav nav-tabs”id =“myTab”> ..然后添加一个链接到你的第二个选项卡：
<div class="tab-pane fade" id="profile">
<form id="tab2">
<a href="#" id="gotohome">Jump to home tab (this works)</a>
...
$('#gotohome').click(function() {
$('#myTab a[href="#home"]').tab('show');
});
jsFiddle工作示例.
