9

我有一个带有 3 个不同内容选项卡的 Bootstrap“选项卡”导航。除了我想从选项卡导航外部链接到其中一个选项卡外，它工作得很好。这意味着当有人单击选项卡窗口外的链接时，它应该设置为“活动”该选项卡并显示内容。

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

这是代码：

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

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

4

7 回答 7

16

你可以做一个小技巧来实现这一点：

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

于 2013-11-06T14:33:11.083 回答
8

The simplest answer is to do it like this:

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

then in javascript add:

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

This will change both the content view and the active button on the top using the built in method of the jquery tabs plugin. If you wanted to add more buttons outside the tab area, then you can make it more general eg.

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


$(document).ready(function () {
    $(".outsidelink").click(function () {
        $('.nav a[href="' +  $(this).attr("href") + '"]').tab('show');          
    });
});
于 2015-02-02T11:02:15.313 回答
8

我遇到了同样的问题，并选择在正确的选项卡上触发点击事件，然后让 Bootstrap 做需要的事情。

$('#link').on('click', function(){
  $('.nav-tabs a[href="#profile"]').click();
});
于 2015-02-28T09:01:11.330 回答
2

根据 Omiod 的回复，（我没有足够的代表将其作为评论——doh！）

在没有额外脚本标记的情况下做同样的事情：

<a href="javascript:void(0);" onclick="$('.nav-tabs a[href=\'#TABID\']').click();">LINK NAME</a>
于 2017-10-22T10:41:02.907 回答
1

在我做的对我有用的小技巧下面。

我可以调用将引导药丸 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');
        });
    }
});

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

于 2014-09-04T10:45:22.417 回答
0

添加外部链接时可能只需要添加/减去类。它根本没有真正绑定到选项卡。

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

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

于 2013-11-06T14:33:24.533 回答
0

尝试这个：

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

他们你的网址看起来像这样：“[URL]#tab-number”

我希望能帮助你......问候......

于 2014-08-28T18:52:10.510 回答