我'm using Bootstrap' s nav-tabs
,具有以下设置:
<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>
如您所见,我的 profile
标签中有一个链接,链接到第一个标签 . 单击锚点会更改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);
然而,每次单击选项卡时都会重新加载,此外,当单击锚点时,它仍然没有加载 home
选项卡 .
那么,我如何从另一个标签跳转到给定的 id
?
2 回答
您提到的其他答案可能会让您误入歧途......从同一页面中更改标签是相当简单的(无论您是否在另一个标签中):您可以使用基本的引导程序tab navigation Javascript为此 .
首先更改你的html:为你的
<ul class="nav nav-tabs" id="myTab">..
添加一个id然后添加一个链接到你的第二个标签:并在您的文档中添加以下内容:
工作示例在jsFiddle .
给出的答案
也可用于使JavaScript软件跳转到特定选项卡 . 假设您希望使用url跳转到开始时的特定选项卡:
你可以想象它会起作用(你需要做一些额外的编码) . 假设您的第一页位于tabHome(您使用'active'类激活了 . 当您尝试使用javascript返回该页面时,您必须使用以下命令从tabHome中删除活动类: