如何动态添加和删除jquery选项卡？
我有一个aspx页面，我有2个静态jquery选项卡。单击其中一个选项卡上的按钮，我想动态添加一个新选项卡，从其他aspx页面加载其内容。我也有尝试使用以下示例
http://jquery-ui.googlecode.com/svn/trunk/demos/tabs/manipulation.html
我已经下载了jquery-ui-1.8rc3.custom zip文件，并尝试将上面的相关脚本，css文件添加到我的asp.net网站并运行，但它似乎没有用。我也不想要打开一个对话框，要求用户输入标签标题，如上例所示。
请有人帮我这个吗？
谢谢。
您是否尝试过使用标签的添加方法 ？
var tabs = $("#tabs").tabs(); $('#tabs-1 button').click(function(){ tabs.tabs('add','https://stackoverflow.com/url_for_tab/','New tab'); }); 更新 –从jQuery UI 1.9开始，不推荐使用add remove方法，并且在jQuery UI 1.10中它们已被删除。
现在，为远程（ajax）内容选项卡执行此操作的正确方法是：
var tabs = $( "#tabs" ).tabs(); var ul = tabs.find( "ul" ); $( "New Tab " ).appendTo( ul ); tabs.tabs( "refresh" );
当你已经拥有内容时：
var tabs = $( "#tabs" ).tabs(); var ul = tabs.find( "ul" ); $( "New Tab " ).appendTo( ul ); $( "New Content
" ).appendTo( tabs ); tabs.tabs( "refresh" );
var main = document.getElementById('main'); var tabber = createMainTab(); tabber.setAttribute("id","tabber") var mainHelper = createTabHelper(); var testH = createTabHelperElement("Test tab",tabber); var testTab = createTab(testH); tabber.appendChild(mainHelper); mainHelper.appendChild(testH); tabber.appendChild(testTab); main.appendChild(tabber); $(tabber).tabs(); function createMainTab(){ var mainDiv = document.createElement("div"); mainDiv.setAttribute("class","ui-tabs ui-widget ui-widget-content ui-corner-all"); mainDiv.style.height="100%"; mainDiv.onk_initialised = false; return mainDiv; } function createTabHelper(){ var mainUl = document.createElement("ul"); mainUl.setAttribute("class","ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all"); return mainUl; } function createTabHelperElement(name,mainTab){ var mainLi = document.createElement("li"); var active = !mainTab.onk_initialised; mainTab.onk_initialised=true; if(active){ mainLi.setAttribute("class","ui-state-default ui-corner-top ui-tabs-selected ui-state-active"); }else{ mainLi.setAttribute("class","ui-state-default ui-corner-top"); } mainLi.onk_createdActive = active; mainLi.onk_id = "tab_"+cache; var oLink = document.createElement("a"); oLink.setAttribute("href","#tab_"+cache); oLink.innerHTML = name; mainLi.appendChild(oLink); cache++; return mainLi; } function createTab(tabHelper){ var tabDiv = document.createElement("div"); if(tabHelper.onk_createdActive){ tabDiv.setAttribute("class","ui-tabs-panel ui-widget-content ui-corner-bottom"); }else{ tabDiv.setAttribute("class","ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"); } tabDiv.setAttribute("id",tabHelper.onk_id); return tabDiv; }
我也在动态添加标签。
mytabs.tabs('add', 'https://stackoverflow.com/url_for_tab/', 'New tab title');
用于添加新标签。 在我的例子中它是一个动态的jsp文件
您可能需要获得另外两个jQuery UI Widgets：Dialog和Position。
我遇到了同样的问题：下载了演示版，而且manipulate.html没有用。 在我的情况下，它在页面加载时抛出错误：
$("#dialog").dialog is not a function close: function() {
页面有404s：jquery.ui.position.js jquery.ui.dialog.js
因此，该页面具有意外的依赖项，并且不包含在我的自定义下载中。 我回去了另一个来自http://jqueryui.com/download的自定义下载
一旦演示可以解析jquery.ui.dialog.js就可以了，因为对话框function存在：
typeof $("#dialog").dialog "function"