Heyecan Bootstrap - Biraz bilgileri organize etmek Heyecan Bootstrap sekmeleri kullanıyorum</p> <p>Dinamik ... her türlü giriş/help/tavsiye için şimdiden

Question

Teşekkür Ekle/Sekmeler ve Sekme İçerik Kaldırma. Sekmeler bir form sayfasında bulunur ve her sekme, kullanıcının tüm formu göndermeden önce bu sayfaya birden çok kişi ekleyebileceği bir "iletişim formu" içerir. Burada

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

Tam kodu: http://jsfiddle.net/Harlow/zQnck/34/

Ben sekmelerin jQuery UI "basit manipülasyon" Örneğin işlevselliğini taklit etmeye çalışıyorum. (http://jqueryui.com/tabs/#manipulation)

Şu anda yeni bir sekme katacak var ama "vb contact_01, contact_02" gibi, koddan devam o kendi kimliği (bir yeni, benzersiz bir sekme eklemek mümkün olmak istiyorum ne) her zaman son sekme olacak olan "+ Yeni Kişi Ekle" yi tıklatarak, ancak aslında kendi sekme içerik panosuna sahip değildir. Dinamik olarak içerik eklerken diğer tarafta, her sekmede küçük "x" işaretini tıklayarak bunu silmek istiyorum.

--EDIT--

Sadece "Yeni Sekme" tıklayarak üzerine jQuery örnek tetik kalıcı olduğunu, netleştirmek için. Benim amacım için, sadece sekme adını veya içeriğini girmeden yeni bir sekme oluşturmak istiyorum (içerik her zaman aynı iletişim formu olacak ve yeni oluşturulan ID ile aynı olan sekme adıyla iyiyim) Daha sonra kişinin adını daha sonra otomatik olarak güncelleştirin.)

Answer 1

DÜZENLEME: Orijinal kemanı, her iki fidyenin öldüğü kadar iyi bir şekilde ürettim.

Yeni keman: Ben vurgulu işlevini yerine kullanılan css kaldırıldı http://jsfiddle.net/dogoku/KdPdZ/2/

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

Not

.nav-tabs > li:hover > span { 
    display:block; 
} 

Answer 2

Dogoku en jsfiddle 404 olarak görünüyor, bu yüzden birlikte çözümün hızlı bir jsfiddle koymak burada: http://jsfiddle.net/xQ3f5/

Bu, + Kişi Ekle sekme öğesine uygulanan 'etkin' sınıfı durdurmak için bunu güncellemedim sekme öğelerinden herhangi birine karşılık gelir. Ayrıca aktif sekmeyi yeni oluşturulmuş olana geçirmeyi öneririm. . İşte javascript var: önce() `yerine` $ yeni sekmeler eklemek

başlayanlar için

$(".nav-tabs").on("click", "a", function(e){ 
     e.preventDefault(); 
    if(this.id == "add-contact"){return false;} 
     $(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 id="contact_tab_'+id+'"><a href="#contact_'+id+'">New Tab</a></li>');   
     $('.tab-content').append('<div class="tab-pane" id="contact_'+id+'">Contact Form: New Contact '+id+'</div>'); 
     $("#contact_tab_"+id+" a").tab('show'); 
});