如何动态创建和删除基础 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>

代码笔：http://codepen.io/anon/pen/dMOGyO

如何在基础上实现这一目标。

Answer 1

您当前的代码仅添加选项卡标题。在您的 .add-form click 事件中，您需要为选项卡内容添加相应的 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 class，因为它会干扰选项卡选择。您必须 re-style 使用不同的 class 名称。

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

如何动态创建和删除基础 6 中的选项卡？

How to Dynamic create and remove a tabs in foundation 6?

jquery

tabs

zurb-foundation

zurb-foundation-6