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

Posted 2023-02-22

【中文标题】使用 Bootstrap 导航选项卡从另一个选项卡跳转到特定选项卡

【英文标题】：Jump to specific tab from another tab with Bootstrap's nav-tabs

【发布时间】：2013-02-27 21:36:19

【问题描述】：

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

【参考方案1】：

您提到的其他答案可能使您走错了路……从同一页面中更改选项卡相当简单（无论您是否在另一个选项卡中）：您可以使用基本的引导程序tab navigation Javascript。

首先稍微更改一下您的 html：在您的 <ul class="nav nav-tabs" id="myTab">.. 中添加一个 id，然后在您的第二个标签中添加一个链接：

<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 的工作示例。

【参考方案2】：

给定的答案

$('#myTab a[href="#home"]').tab('show');

还可用于使 JavaScript 软件跳转到特定选项卡。 假设您想在开始时使用 url 跳转到特定选项卡：

http://myDomain/myApp#tabSomewhere

您可以想象这会起作用（您需要进行一些额外的编码）。 假设您的第一页在 tabHome 上（您使用“活动”类使其处于活动状态。当您尝试使用 javascript 返回该页面时，您必须使用以下方法从 tabHome 中删除活动类：

$('li').removeClass('active');