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

问题描述

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

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

代码如下:

<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">消息</a></li><div class="tab-content"><div class="tab-pane active" id="home">首页内容</div><div class="tab-pane" id="profile">Profile Content</div><div class="tab-pane" id="messages">消息内容</div>

<p></p><a href="#profile" data-toggle="tab">来自外部的个人资料链接</a>

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

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

解决方案

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

$('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/

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?

Here is the code:

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

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屋！