使用 Bootstrap 的导航选项卡从另一个选项卡跳转到

Jump to specific tab from another tab with Bootstrap#39;s nav-tabs(使用 Bootstrap 的导航选项卡从另一个选项卡跳转到特定选项卡)

问题描述

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

如您所见，我的 profile 选项卡中有一个链接，该链接指向第一个选项卡.单击锚点会更改 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 引导选项卡:在页面重新加载或超链接时转到特定选项卡:

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?

推荐答案

你可能已经被你提到的其他答案弄错了......从同一页面内更改标签是相当微不足道的(不管如果您在另一个选项卡中或不在):您可以使用基本引导 选项卡导航 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-tabs" id="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 的导航选项卡从另一个选项卡跳转到特定选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！