Bootstrap łączący się z zakładką z adresem URL

Question

Pracuję z bootstrapem 3 i mam problem z połączeniem adresu URL z określoną zakładką, panel się zmienia, ale aktywowana karta nie robi. Dlatego chcę, aby linia <a href="#tab2" data-toggle="tab">link</a>, aby przejść do tab2, ale to tylko idzie do panelu tab2, nie aktywuje kartę.

Oto html:

<div class="tabbable"> 
<ul class="nav nav-tabs"> 
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li> 
    <li><a href="#tab2" data-toggle="tab">Section 2</a></li> 
    <li><a href="#tab3" data-toggle="tab">Section 3</a></li> 
</ul> 

<div class="tab-content"> 
    <div class="tab-pane active" id="tab1"> 
    <p><a href="#tab2" data-toggle="tab">link</a>.</p> 
    </div> 

    <div class="tab-pane" id="tab2"> 
    <p> I'm in Section 2.</p> 
    </div> 

<div class="tab-pane" id="tab3"> 
    <p>Howdy, I'm in Section 3 </p> 
    </div> 
</div> 
</div> 

Można to sprawdzić w ten link http://bootply.com/90412

Answer 1

aby aktywować kartę można użyć jQuery plugin, jak pokazano na bootstrap. Więc można dodać ten kawałek kodu jQuery do programu włączyć kartę:

$(function() { 
    $('#tab1 a').click(function (e) { 
     e.preventDefault(); 
     $('a[href="' + $(this).attr('href') + '"]').tab('show'); 
    }) 
}); 

Można sprawdzić ten link: odpowiedź Updated code

Answer 2

aktywującym zakładki zależy od struktury ul. W przykładzie przypadku można zastąpić zdarzenie click wtyczki dodając na końcu dokumentu (po Boostrap w JavaScript):

$(function(){ 
    $(document).on('click.bs.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) { 
    e.preventDefault() 
    if($(this).parent().prop('tagName')!=='LI') 
    { 

     $('ul.nav li a[href="' + $(this).attr('href') + '"]').tab('show'); 
    } 
    else 
    { 
     $(this).tab('show') 
    } 
    }) 
}); 

Ref: Get element type with jQuery

Uwaga: krótsza wersja będzie również pracować w tym przypadku:

$(function(){ 
    $(document).on('click.bs.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) { 
    e.preventDefault() 
    $('ul.nav li a[href="' + $(this).attr('href') + '"]').tab('show'); 
}) 
}); 

Answer 3

Like Rohitha, ale trochę bardziej ogólnie:

$(function() { 
    $('a.link-to-tab').click(function (e) { 
    e.preventDefault(); 
    $('a[href="' + $(this).attr('href') + '"]').tab('show'); 
    }) 
}); 

Działa dla każdego znacznika kotwicy z numerem class="link-to-tab" i href do identyfikatora karty, który ma zostać wyświetlony. Na przykład <a class="link-to-tab" href="#tab2">.