通过单击jQuery UI选项卡上的+按钮来复制最后一个选项卡

Question

我需要创建一个选项卡式页面，用户可以在其中单击选项卡/按钮来复制最后一个选项卡，如下图所示：

在这种情况下，您将单击加号，将创建TAB 3 ，其内容与TAB 2相同。

我想知道最好的方法是什么？

编辑：

这是一个JSFiddle （一定要先运行），其中包含我到目前为止的代码。 它几乎在那儿，但是如果您的标签名带有空格，则由于某种原因它不会重复最后一个子HTML。

Answer 1

最好手动生成id而不是直接使用用户输入来生成id ，因为它应该是唯一的，不能包含空格等。

我们可以将标签的标题设置为用户输入，同时在幕后生成唯一的id 。

我已经通过使用jquery clone()方法更新了您的代码，如下所示：

 $(function() { var $tabs = $("#tabs").tabs(), $dialog = $("#new_tab_dialog").dialog({ autoOpen: false, height: 200, width: 350, modal: true, buttons: { "Create a new tab": function() { $dialog.dialog("close"); var tid = parseInt($(".tab").last().attr("id").replace("tab", "")) + 1, li = $("<li/>").insertBefore("#list li:last"); $("<a/>", { text: $("#new_tab_input").val(), href: "#tab" + tid }).appendTo(li); $("#tabs div.tab:last").clone().attr("id", "tab" + tid).appendTo("#tabs"); $tabs.tabs("refresh").tabs("option", "active", -2); alert(tid); }, Cancel: function() { $dialog.dialog("close"); } }, open: function() { $("#new_tab_input").val(""); } }); $("#create_tab").click(function() { $dialog.dialog("open"); }); }); 

 input.text { margin-bottom: 12px; width: 95%; padding: .4em; } 

 <link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> <div id="tabs"> <ul id="list"> <li><a href="#tab1">Tab 1</a> </li> <li><a href="#tab2">Tab 2</a> </li> <li><a href="#new_tab_dialog" id="create_tab">+</a> </li> </ul> <div id="tab1" class="tab"> <p>Tab 1 content.</p> </div> <div id="tab2" class="tab"> <p>Tab 2 content.</p> <p>When you click the plus it should create a new tab (and corresponding div) by duplicating the last child in the list.</p> </div> </div> <div id="new_tab_dialog" title="Duplicate the last tab"> <input type="text" id="new_tab_input" class="text ui-widget-content ui-corner-all" placeholder="Enter new tab name" /> </div> 

旁注：我为内容<div>赋予了通用的类名，以轻松获取id例如$(".tab").last().attr("id") ，而不是从标签，看起来像$("#tabs").find("li:last").prev().find("a").attr("href")

PS：看起来jquery ui继续尝试获取内容，即使为选项卡的锚点指定了# 。 我给它提供了对话框的id ，而不是为了满足可怜的事情。