web-dev-qa-db-fra.com

Ajouter/Supprimer des onglets dynamiquement dans Bootstrap - Rendre actif l'onglet créé

Voici l'extrait permettant d'ajouter/de supprimer de manière dynamique les onglets d'amorçage. Tout fonctionne bien, mais j'aimerais que l'onglet nouvellement créé soit actif et actif plutôt que l'onglet utilisé pour ajouter dynamiquement un onglet.

C'est du violon: http://jsfiddle.net/isherwood/F33Av/4/

Et c'est le code en question: 

HTML:

<div class="container">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#contact_01" data-toggle="tab">Joe Smith</a><span>x</span></li>
        <li><a href="#contact_02" data-toggle="tab">Molly Lewis</a><span>x</span> </li>
        <li><a href="#" class="add-contact" data-toggle="tab">+ Add Contact</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="contact_01">Contact Form: Joe Smith</div>
        <div class="tab-pane" id="contact_02">Contact Form: Molly Lewis</div>
    </div>
</div>

JS: 

$(".nav-tabs").on("click", "a", function(e){
      e.preventDefault();
      $(this).tab('show');
    })
    .on("click", "span", function () {
        var anchor = $(this).siblings('a');
        $(anchor.attr('href')).remove();
        $(this).parent().remove();
        $(".nav-tabs li").children('a').first().click();
    });

    $('.add-contact').click(function(e) {
        e.preventDefault();
        var id = $(".nav-tabs").children().length; //think about it ;)
        $(this).closest('li').before('<li><a href="#contact_'+id+'">New Tab</a><span>x</span></li>');         
        $('.tab-content').append('<div class="tab-pane" id="contact_'+id+'">Contact Form: New Contact '+id+'</div>');
});

CSS:

@import url('http://getbootstrap.com/2.3.2/assets/css/bootstrap.css');

.container {
    margin-top: 10px;
}

.nav-tabs > li {
    position:relative;    
}

.nav-tabs > li > a {
    display:inline-block;
}

.nav-tabs > li > span {
    display:none;
    cursor:pointer;
    position:absolute;
    right: 6px;
    top: 8px;
    color: red;
}

.nav-tabs > li:hover > span {
    display: inline-block;
}
javascriptjquerytwitter-bootstraptabs
16
user3288556

Voici une solution:

Voir JSFiddle

  1. Le tab('show') est toujours appelé lorsque vous cliquez sur le lien "Ajouter un contact". Même si la fonction show tab est appelée, aucun contenu d’onglet n’est affiché car aucun contenu n’y est lié. Ce que j'ai fait est d'ajouter une condition pour arrêter l'activation de cet onglet.

    $(".nav-tabs").on("click", "a", function (e) {
     e.preventDefault();
     if (!$(this).hasClass('add-contact')) {
         $(this).tab('show');
     }
})

  2. J'ai également supprimé l'attribut data-toggle="tab" du lien de navigation "Ajouter un contact". Pour une raison quelconque, il active l'onglet "Ajouter un contact" s'il est là.

    <li><a href="#" class="add-contact">+ Add Contact</a></li>

  3. Lors de l'ajout d'un nouvel onglet, déclenchez la click du nouvel onglet afin que la fonction tab('show') soit appelée. (voir 1)

    $('.add-contact').click(function (e) {
     e.preventDefault();
     var id = $(".nav-tabs").children().length; //think about it ;)
     var tabId = 'contact_' + id;
     $(this).closest('li').before('<li><a href="#contact_' + id + '">New Tab</a> <span>x</span></li>');
     $('.tab-content').append('<div class="tab-pane" id="' + tabId + '">Contact Form: New Contact ' + id + '</div>');

     // add this
     $('.nav-tabs li:nth-child(' + id + ') a').click();
});
25
khakiout

Voici une autre solution, je l'ai trouvée sur internet

Fichier JS:

$('#btnAdd').click(function (e) {
    var nextTab = $('#tabs li').size()+1;

    // create the tab
    $('<li><a href="#tab'+nextTab+'" data-toggle="tab">Tab '+nextTab+'</a></li>').appendTo('#tabs');

    // create the tab content
    $('<div class="tab-pane" id="tab'+nextTab+'">tab' +nextTab+' content</div>').appendTo('.tab-content');

    // make the new tab active
    $('#tabs a:last').tab('show');
});

fichier html:

<div class="container">
  <h1>Bootstrap Dynamic Tabs</h1>
  <div class="well">

    <a href="#" id="btnAdd"><i class="icon-plus-sign-alt"></i> Add Tab</a>
    <br><br>
    <ul class="nav nav-tabs" id="tabs">
        <li class="active"><a href="#tab1">Tab 1</a></li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane active" id="tab1">Hello tab #1 content...</div>
    </div>
  </div>
  <a href="http://www.bootply.com/61679">Edit on Bootply</a>..
</div>

Démo et édition ici https://www.bootply.com/61679

1
Bai Nguyen