通過單擊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 ，而不是為了滿足可憐的事情。