Ссылка на вкладку Bootstrap извне - как установить вкладку на "активный"?

У меня есть начальная "вкладка" навигации с 3 различными вкладками контента. Он отлично работает, за исключением того, что я хочу ссылаться на одну из вкладок вне навигации по вкладкам. Это означает, что когда кто-то щелкает ссылку за окном вкладки, она должна быть "активной" и показывать содержимое.

прямо сейчас, он показывает содержимое этой вкладки правильно, но вкладка не имеет значение "активный". Как мне добиться этого, чтобы он был "активным", как если бы кто-то щелкнул?

вот код:

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

большое спасибо за любую помощь или подсказки :)

7
css jquery tabs twitter-bootstrap

7 ответов

вы можете сделать небольшой трюк, чтобы добиться этого:

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

13

У меня была та же проблема, и я решил просто вызвать событие click на соответствующей вкладке и позволить Bootstrap делать то, что необходимо.

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

самый простой ответ-сделать это так:

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

ниже маленького трюка, который я сделал, это работает для меня.

Я могу вызвать веб-страницу, добавив идентификатор таблетки bootstrap в 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');
        });
    }
});

Edit: мой код не совсем то, что вам нужно, но вы можете обновить его в соответствии с вашими потребностями. Скажите мне, если вам нужны объяснения

1

вероятно, нужно просто добавить / вычесть классы при добавлении внешней ссылки. Он вообще не привязан к вкладке.

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

Рабочая Скрипка:http://jsfiddle.net/Bp2jm/

0

попробуйте это:

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

и их Ваш url выглядит так: "[URL]#tab-number"

Я надеюсь помочь вам.... С уважением...

0

на основе ответа Omiod, (У меня недостаточно репутации, чтобы выразить это как комментарий-doh!)

однострочный, чтобы сделать то же самое без дополнительной разметки скрипта:

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