如何在基础 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-form click 事件中，您需要为选项卡内容添加相应的 div。

下面的行使用来自第一个选项卡的html 内容和appends 将其添加到新的div，该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