从外部链接到引导选项卡 - 如何将选项卡设置为“活动"? [英] Linking to a Bootstrap Tab from outside - how to set the tab to "active"?

问题描述

我有一个带有 3 个不同内容选项卡的 Bootstrap选项卡"导航.除了我想从选项卡导航外部链接到其中一个选项卡外，它工作得很好.这意味着当有人单击选项卡窗口外的链接时，它应该设置为活动"该选项卡并显示内容.

I have a Bootstrap "tab" navigation with 3 different content tabs. It works perfectly except that I want to link to one of the tabs from OUTSIDE the tab navigation. Meaning that when someone clicks a link outside the tab window, it should set to "active" that tab and show the content.

现在，它正确显示了该选项卡的内容，但该选项卡未设置为活动".我该如何实现这一点，以便它应该像有人点击一样活跃"?

Right now, it shows the content of that tab correctly, but the tab is not set to "active". How do I achieve this so that it should as "active" as if someone had clicked?

代码如下:

<div>
<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>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="home">Home Content</div>
  <div class="tab-pane" id="profile">Profile Content</div>
  <div class="tab-pane" id="messages">Messages Content</div>
</div>
</div>

<p></p>

<a href="#profile" data-toggle="tab">Profile Link From Outside</a>

<ul class="nav 导航标签"><li class="active"><a href="#home" data-toggle="tab">首页</a></li><li><a href="#profile" data-toggle="tab">个人资料</a></li><li><a href="#messages" data-toggle="tab">消息</a></li></ul><div class="标签内容"><div class="tab-pane active" id="home">首页内容</div><div class="tab-pane" id="profile">个人资料内容</div><div class="tab-pane" id="messages">消息内容</div></div></div><p></p><a href="#profile" data-toggle="tab">来自外部的个人资料链接</a>

I made a jsFiddle to show it better: http://jsfiddle.net/fLJ9E/

我制作了一个 jsFiddle 来更好地展示它:http://jsfiddle.net/fLJ9E/p>

非常感谢您的任何帮助或提示:)

Thank you very much for any help or hints :)

推荐答案

你可以做一个小技巧来实现:

You can do a small trick to achieve this:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    var target = this.href.split('#');
    $('.nav a').filter('[href="#'+target[1]+'"]').tab('show');
})

http://jsfiddle.net/s6bP9/

这篇关于从外部链接到引导选项卡 - 如何将选项卡设置为“活动"?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！