Bootstrap lier à un onglet avec une URL

Je suis en train de travailler avec bootstrap 3, et je vais avoir quelques problèmes sur la liaison d'une url à un onglet spécifique, le panneau de changements, mais l'activation de l'onglet qui ne marche pas.
Donc je veux la ligne <a href="#tab2" data-toggle="tab">link</a>, pour aller à la tab2, mais il va seulement pour le panneau de la tab2, il n'a pas d'activer l'onglet.

Voici le code 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>

Vous pouvez le tester dans ce lien http://bootply.com/90412

source d'informationauteur MariaZ | 2013-10-28

  1. 21

    Afin d'activer l'onglet, vous pouvez utiliser le plugin jQuery comme indiqué dans bootstrap.
    Ainsi, vous pouvez ajouter ce bout de code jQuery pour votre programme pour activer l'onglet:

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

    Vous pouvez consulter ce lien: Mise à jour du code

  2. 5

    L'activation de l'onglet dépend de l'ul de la structure.
    Dans votre cas vous pourriez remplacer l'événement click du plugin par l'ajout, à la fin de votre document (après Bootstrap 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: Obtenir le type d'élément avec jQuery

    Note: une version plus courte travaillera également dans ce cas:

    $(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');
 })
 });
  3. 0

    Comme Rohitha de réponse, mais un peu plus général:

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

    Fonctionne pour n'importe quelle balise d'ancrage avec class="link-to-tab" et un href de l'onglet id. Par exemple, <a class="link-to-tab" href="#tab2">.