使用Bootstrap的nav-tabs从另一个选项卡跳转到特定选项卡 [英] Jump to specific tab from another tab with Bootstrap's nav-tabs

问题描述

我正在使用Bootstrap的 nav-tabs ，并进行以下设置：

I'm using Bootstrap's nav-tabs with the following setup:

<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，但是它不会跳转到特定选项卡。

As you can see, I have a link in my profile tab, 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.

然后我注意到通常无法链接直接到选项卡，所以我从添加了以下代码Twitter Bootstrap选项卡：转到页面重新加载或超链接上的特定选项卡：

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:

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

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?:

window.location.reload(true);

然而，每当我点击一个标签时，这会重新加载，此外它仍然没有单击锚点时，加载 home 选项卡。

This however ended up in a reload every time I clicked on a tab, in addition it still didn't load the home tab, when clicked on the anchor.

因此，我将如何跳转到给定的 id 来自另一个标签？

Thus, how would I jump to a given id from another tab?

推荐答案

你可能已被放在你提到的其他答案错了脚...在同一页面内更改标签是相当简单的（无论你是否在另一个标签中）：你可以使用基本的bootstrap 标签导航Javascript 。

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 Javascript for this.

首先更改你的html一点：在您的< ul class =nav nav-tabsid =myTab> .. 中添加一个ID，然后添加第二个标签的链接：

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:

<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');
});

jsFiddle 。

这篇关于使用Bootstrap的nav-tabs从另一个选项卡跳转到特定选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！