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，.tabs-content添加到tabId。它使用$(".tabs-content").append('<div class="tabs-panel is-active" id="' + tabId + '">' + $("#info1").html() + '</div>');来确保它与正确的标签标题相关联：

$(document).foundation();

我在添加新内容后也会调用tabs-title，以确保任何事件侦听器都会反弹。

在以编程方式选择标签时，Foundation 6文档提供的信息不足，但在经过一些试验和错误之后，我想出了一个解决方案。

我必须从“+”按钮中删除//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));类，因为它会干扰选项卡选择。你必须使用不同的类名重新设置它。

{{1}}

<强> Updated Pen

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

1 个答案: