从外部链接到Bootstrap选项卡 - 如何将选项卡设置为"活动"？

Question

我有一个带有3个不同内容选项卡的Bootstrap"tab"导航.除了我想链接到OUTSIDE选项卡导航中的一个选项卡之外,它的工作方式非常完美.这意味着当有人单击选项卡窗口外的链接时,它应设置为"活动"该选项卡并显示内容.

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

这是代码:

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

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

Answer 1

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

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

Answer 2

我遇到了同样的问题,并选择在正确的选项卡上触发click事件,然后让Bootstrap执行所需的操作.

$('#link').on('click', function(){
  $('.nav-tabs a[href="#profile"]').click();
});

Answer 3

最简单的答案是这样做:

<a href="#" id="profilelink">Profile Link From Outside</a>

然后在javascript中添加:

$(document).ready(function () {
    $("#profilelink").click(function () {
        $('.nav a[href="#profile"]').tab('show');           
    });
});

这将使用jquery选项卡插件的内置方法更改顶部的内容视图和活动按钮.如果你想在标签区域之外添加更多按钮,那么你可以使它更通用,例如.

<a href="#profile" class="outsidelink">Profile Link From Outside</a>


$(document).ready(function () {
    $(".outsidelink").click(function () {
        $('.nav a[href="' +  $(this).attr("href") + '"]').tab('show');          
    });
});