Question

我有一个带有3个不同内容标签的Bootstrap“标签”导航。除了我想链接到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

我遇到了同样的问题，并选择在正确的选项卡上触发点击事件，然后让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 tabs插件的内置方法更改顶部的内容视图和活动按钮。如果你想在标签区域之外添加更多按钮，那么你可以使它更通用，例如。

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


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

Answer 4

在我做的小动作之下，对我有用。

我可以调用网页将bootstrap pill id添加到URL。

例如，调用mypage.html＃other_id将显示匹配#other_id

的药丸

<ul class="nav nav-pills">
    <li class="active"><a href="#default_id" data-toggle="pill">Default tab</a></li>
    <li><a href="#other_id" data-toggle="pill">Other tab</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="default_id">
    ...
    </div>
    <div class="tab-pane" id="other_id">
    ...
    </div>
</div>

这里是JQuery代码：

$(document).ready(function(){
    //Manage hash in URL to open the right pill
    var hash = window.location.hash;
    // If a hash is provided 
    if(hash && hash.length>0)
    {
        // Manage Pill titles
        $('ul.nav-pills li a').each(function( index ) {
            if($(this).attr('href')==hash)
                $(this).parent('li').addClass('active');
            else
                $(this).parent('li').removeClass('active');
        });
        // Manage Tab content
        var hash = hash.substring(1); // Remove the #
        $('div.tab-content div').each(function( index ) {
            if($(this).attr('id')==hash)
                $(this).addClass('active');
            else
                $(this).removeClass('active');
        });
    }
});

编辑：我的代码并不完全符合您的需求，但您可以根据自己的需要进行更新。如果您需要解释，请告诉我

Answer 5

添加外部链接时可能只需添加/减去类。它根本没有真正与标签绑定。

$(".outside-link").click(function() {
    $(".nav li").removeClass("active");
    $($(this).attr("data-toggle-tab")).parent("li").addClass("active");
});

工作小提琴：http://jsfiddle.net/Bp2jm/

Answer 6

试试这个：

<li ....> 
<a href="#tab-number">Tab Title</a>
</li>

他们的网址如下：“[URL] #tab-number”

我希望能帮到你.... 此致...

Answer 7

基于Omiod响应，（我没有足够的代表把它作为评论 - doh！）

在没有额外脚本标记的情况下执行相同的单行程序：

<a href="javascript:void(0);" onclick="$('.nav-tabs a[href=\'#TABID\']').click();">LINK NAME</a>

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

7 个答案: