使用Bootstrap的nav-tabs从另一个选项卡跳转到特定选项卡

Question

我正在使用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>

如您所见,我的profile标签中有一个链接,链接到第一个标签.单击锚点会更改URL栏中的URL,但不会跳转到特定选项卡.

然后我注意到通常无法直接链接到选项卡,因此我在Twitter Bootstrap选项卡中添加了以下代码:转到页面重新加载或超链接上的特定选项卡:

// 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的解决方案:如何真正重新加载带有锚标记的网站？:

window.location.reload(true);

然而,每次单击选项卡时都会重新加载,此外home,当单击锚点时,它仍然没有加载选项卡.

那么,我如何id从另一个标签跳转到给定的？

Answer 1

您提到的其他答案可能会让您误入歧途......从同一页面中更改标签是相当简单的(无论您是否在另一个标签中):您可以使用基本的引导程序标签导航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的工作示例.