如何動態創建並刪除基礎6中的選項卡？

Question

我想要讓用戶點擊標籤部分的示例添加按鈕，根據第一個選項卡中的內容動態創建第二個選項卡的內容。

我在Bootstrap中實現了這一點，但我真的堅持這個基礎。

有人可以幫助這裏。
預先感謝您

<div class="row"> 
    <ul class="tabs main-tab nav-tabs" data-tabs id="shop-main-tabs"> 

    <li class="tabs-title is-active"><a href="#info1" aria-selected="true" ><i class="fi-torso"> Add Participant</i></a></li> 

    <li class="tabs-title main-tab" ><a href="#" class="add-form"><i class="fi-plus">+</i></a></li> 

</ul> 

</div> 

Codepen：http://codepen.io/anon/pen/dMOGyO

如何在基礎實現這一目標。

Answer 1

您目前的代碼只是添加標籤標題。在您的.add-formclick事件中，您需要爲選項卡內容添加相應的div。

下面的行使用第一個標籤中的html內容和appends它將新的div添加到.tabs-content。它採用tabId，以確保它與正確的標籤標題有關：

$(".tabs-content").append('<div class="tabs-panel is-active" id="' + tabId + '">' + $("#info1").html() + '</div>'); 

我還呼籲$(document).foundation();加入新的內容後，以確保任何事件偵聽器是反彈。

Foundation 6文檔在編程選擇選項卡時沒有提供足夠的信息，但是我經過一些試驗和錯誤後才提出了一個解決方案。

我不得不從「+」按鈕中刪除tabs-title類，因爲它會干擾選項卡選擇。您必須使用不同的類名重新設計它。

//Find the parent "ul" that contains the tabs 
var target = document.getElementById("shop-main-tabs"); 
var options = { 
    "linkClass": "tabs-title" 
}; 

//Use the target "ul" to initialize the "Tabs" object. 
var elem = new Foundation.Tabs($(target), options); 

//Find the tab that will be selected 
var tab = document.getElementById(tabId); 
elem.selectTab($(tab)); 

Updated Pen