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

Question

我有一个包含三个不同内容标签的Bootstrap“tab”导航。它工作得很好，除了我想要从导航栏之外链接到其中一个标签。也就是说，当某人在标签窗口外点击链接时，应该将其设置为“active”并显示内容。

目前，它正确显示该标签的内容，但该标签未设置为“active”。我如何实现这一点，以便它与某人单击时一样“active”？

以下是代码：

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

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

- user1227914

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/

- claustrofob

---

有没有一种方法可以仅使用HTML标签来完成这个而不是使用JQuery或JavaScript解决方案？例如像data-target="#profile" data-toggle="tab"这样的方式？这是Bootstrap的一个错误吗？ - Leo

Answer 2

最简单的做法是这样的：

<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');          
    });
});

- Myke Black

---

如果您在页面上有多个选项卡面板，则需要为面板指定一个id，并在JavaScript中将.nav更改为#panelid。 - Myke Black

有没有一种方法可以仅使用HTML标签来完成这个而不是使用JQuery或JavaScript解决方案？例如像data-target="#profile" data-toggle="tab"这样的方式？这是Bootstrap的一个错误吗？ - Leo

$('.nav a[href="' + $(this).attr("href") + '"]').tab('show') 对我有效，但是$('.nav a[href="' + $(this).attr("href") + '"]').trigger('click') 对我无效。 - Meddie

Answer 3

我曾经遇到过同样的问题，我的解决方法是在正确的选项卡上触发一个点击事件，然后让Bootstrap自行处理。

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

- Omiod

---

我倾向于这样做，考虑到从文档中得到的$('#someTab').tab('show')实际上似乎没有在选项卡控件上设置活动状态。 - danwild

".click()对我不起作用，我不得不使用.tab('show')" - Meddie

Answer 4

根据Omiod的回复， （我没有足够的声望将其作为评论发布 - 哎呀！）

一行代码可以不使用额外的脚本标记完成相同的功能：

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

- Jules

---

非常好用 - 非常简短和简单的解决方案。 - R_K

没有使用jQuery：<a href="javascript:void(0);" onclick="document.getElementById('TABID).click();">链接名称</a> - Duc Manh Nguyen

Answer 5

以下是我使用的小技巧，对我很有效。

我可以通过在URL中添加Bootstrap Pill ID来调用网页。

例如，调用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');
        });
    }
});

编辑：我的代码不完全符合您的需求，但您可以更新它以满足您的需求。如果需要解释，请告诉我。

- Manu L

Answer 6

试试这个：

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

然后你的URL看起来像这样："[URL]＃tab-number"

希望能帮到你... 敬礼...

- amedriveroperez

Answer 7

当你添加外部链接时，可能只需要添加/删除类。它实际上与选项卡没有任何关系。

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

工作的Fiddle: http://jsfiddle.net/Bp2jm/

- James_1x0

---

谢谢您的回复 :) - user1227914