web-dev-qa-db-fra.com

Bootstrap liant à un onglet avec une URL

Je travaille avec bootstrap 3 et j’ai quelques problèmes pour lier une URL à un onglet spécifique, le panneau change mais l’onglet activé ne .. .. Je souhaite donc que la ligne <a href="#tab2" data-toggle="tab">link</a>, pour aller à l’onglet2, mais seulement va au panneau de l'onglet2, il n'active pas 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 tester ceci dans ce lien http://bootply.com/90412

javascripttwitter-bootstrap-3
9
MariaZ

Pour activer l'onglet, vous pouvez utiliser le plugin jQuery comme indiqué dans bootstrap . Vous pouvez donc ajouter ce morceau de code jQuery à votre programme pour activer l'onglet:

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

Vous pouvez vérifier ce lien: Code mis à jour

21
Rohitha

L'activation de l'onglet dépend de la structure ul . Dans votre cas, vous pouvez écraser l'événement click du plugin en ajoutant à la fin de votre document (après le code Javascript de Boostrap):

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

Remarque: une version plus courte fonctionnera é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');
 })
 });
5
Bass Jobsen

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

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

Fonctionne pour toute balise d'ancrage avec class="link-to-tab" et un href à l'identifiant de l'onglet à afficher. Par exemple, <a class="link-to-tab" href="#tab2">.

0
Nathan