twitter-bootstrap 使用 Bootstrap 的导航选项卡从另一个选项卡跳转到特定选项卡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15360112/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jump to specific tab from another tab with Bootstrap's nav-tabs
提问by cherrun
I'm using Bootstrap's nav-tabswith the following setup:
我正在使用 Bootstrap 的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>
As you can see, I have a link in my profiletab, which links to the first tab. Clicking on the anchor does change the URL in the URL bar, however it doesn't jump to the specific tab.
如您所见，我的profile选项卡中有一个链接，它链接到第一个选项卡。单击锚点确实会更改 URL 栏中的 URL，但它不会跳转到特定选项卡。
I then noticed that it is generally not possible to link to a tab directly, so I added the following code from Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink:
然后我注意到通常无法直接链接到选项卡，因此我从Twitter Bootstrap Tabs添加了以下代码：转到页面重新加载或超链接上的特定选项卡：
// 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;
})
Now I can link to a specific tab from somewhere else, but not, if I'm on the same page where the nav-bar is. Reloading the page would then jump to the wanted tab, so I thought I could just forcefully reload the page, with the solution from Javascript: How to truly reload a site with an anchor tag?:
现在我可以从其他地方链接到特定选项卡，但如果我在导航栏所在的同一页面上，则不行。重新加载页面然后会跳转到想要的选项卡，所以我想我可以使用Javascript的解决方案强制重新加载页面：如何真正重新加载带有锚标记的网站？：
window.location.reload(true);
This however ended up in a reload every time I clicked on a tab, in addition it still didn't load the hometab, when clicked on the anchor.
然而，每次我点击一个选项卡时，这都会重新加载，此外home，当点击锚点时，它仍然没有加载该选项卡。
Thus, how would I jump to a given idfrom another tab?
因此，我如何id从另一个选项卡跳转到给定的？
回答by Marijn
You might have been put on the the wrong foot by the other answers you mention ... it is fairly trivial to change tabs from within the same page (regardless if you're in another tab or not): you can use the basic bootstrap tab navigation Javascriptfor this.
您可能已经被您提到的其他答案放在了错误的位置......从同一页面内更改标签是相当微不足道的（无论您是否在另一个标签中）：您可以使用基本引导程序用于此的选项卡导航 Javascript。
First change your html a bit: add an id to your <ul class="nav nav-tabs" id="myTab">..then add a link to your second tab:
首先稍微更改您的 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>
...
and add the following in your document ready:
并在您准备好的文档中添加以下内容：
$('#gotohome').click(function() {
$('#myTab a[href="#home"]').tab('show');
});
Working example at jsFiddle.
jsFiddle 的工作示例。
回答by Harm
The given answer
给出的答案
$('#myTab a[href="#home"]').tab('show');
can also be used to make a JavaScript software jump to a specific tab. Assume you want to jump to a specific tab on start by using the url:
还可用于使 JavaScript 软件跳转到特定选项卡。假设您想在开始时使用 url 跳转到特定选项卡：
http://myDomain/myApp#tabSomewhere
You can imagine that will work (you need to make some additional coding). Suppose your First page is on the tabHome (you make that active with the 'active' class. When you try to go back to that page using javascript you have to remove the active class from the tabHome using:
您可以想象这会起作用（您需要进行一些额外的编码）。假设您的第一页在 tabHome 上（您使用 'active' 类使其处于活动状态。当您尝试使用 javascript 返回该页面时，您必须使用以下方法从 tabHome 中删除活动类：
$('li').removeClass('active');
