it-swarm.com.de

Tabs dynamisch in Bootstrap hinzufügen/entfernen - Erstellte Tabs aktivieren

Hier ist das Snippet zum dynamischen Hinzufügen/Entfernen von Bootstrap-Registerkarten. Alles funktioniert gut, aber ich möchte, dass die neu erstellte Registerkarte aktiv und im Fokus ist, anstatt die Registerkarte, mit der dynamisch eine Registerkarte hinzugefügt wird.

Dies ist Geige: http://jsfiddle.net/isherwood/F33Av/4/

Und das ist der fragliche Code: 

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;
}
16
user3288556

Hier ist eine Lösung:

Siehe JSFiddle

  1. Der Befehl tab('show') wird weiterhin aufgerufen, wenn auf den Navlink "Kontakt hinzufügen" geklickt wird. Obwohl die Show-Tab-Funktion aufgerufen wird, wird kein Tab-Inhalt angezeigt, da mit ihm kein vorhandener Inhalt verknüpft ist. Was ich getan habe, ist das Hinzufügen einer Bedingung, um die Aktivierung dieser Registerkarte zu beenden.

    $(".nav-tabs").on("click", "a", function (e) {
         e.preventDefault();
         if (!$(this).hasClass('add-contact')) {
             $(this).tab('show');
         }
    })
    
  2. Ich habe auch das data-toggle="tab"-Attribut des Navlinks "Kontakt hinzufügen" entfernt. Aus irgendeinem Grund wird dort die Registerkarte "Kontakt hinzufügen" aktiviert.

    <li><a href="#" class="add-contact">+ Add Contact</a></li>
    
  3. Wenn Sie eine neue Registerkarte hinzufügen, lösen Sie die Variable click der neuen Registerkarte aus, sodass die Funktion tab('show') aufgerufen wird. (siehe 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

Hier ist eine andere Lösung, die ich im Internet gefunden habe

JS-Datei:

$('#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');
});

hTML-Datei:

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

Demo und Bearbeitung hier https://www.bootply.com/61679

1
Bai Nguyen