从外部链接到Bootstrap标签 - 如何将标签设置为“活动”？ [英] Linking to a Bootstrap Tab from outside - how to set the tab to "active"?

问题描述

我有一个Bootstrap选项卡导航有3个不同的内容选项卡。它工作正常，除了我想链接到选项卡导航外部的选项卡之一。这意味着当有人点击标签页窗口之外的链接时，应该将该标签页设置为有效并显示内容。

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>

我做了一个jsFiddle显示更好：http://jsfiddle.net/fLJ9E/

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

非常感谢您的任何帮助或提示：）

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/

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