如何动态添加和删除 jquery 选项卡？答案

【问题标题】：how to add and remove jquery tabs dynamically?如何动态添加和删除 jquery 选项卡？
【发布时间】：2010-03-10 11:45:43
【问题描述】：

我有一个 aspx 页面，上面有 2 个静态 jquery 选项卡。单击其中一个选项卡上的可用按钮后，我想动态添加一个新选项卡，它的内容从另一个 aspx 页面加载。我'也尝试过以下示例

http://jquery-ui.googlecode.com/svn/trunk/demos/tabs/manipulation.html

我已经下载了 jquery-ui-1.8rc3.custom zip 文件并尝试将上述页面与相关脚本、css 文件添加到我的 asp.net 网站并运行，但它似乎不起作用。另外我不想像上面的示例那样打开一个对话框并要求用户输入选项卡标题。

有人可以帮我解决这个问题吗？

谢谢。

【问题讨论】：

有人可以修复链接吗？

标签： jquery dynamic tabs

【解决方案1】：

您是否尝试过使用标签的add method？

var tabs = $("#tabs").tabs();
$('#tabs-1 button').click(function(){
    tabs.tabs('add','/url_for_tab/','New tab');
});

更新 -- 从 jQuery UI 1.9 开始，添加删除方法已被弃用，在 jQuery UI 1.10 中它们已被删除。

现在对远程（ajax）内容选项卡执行此操作的正确方法是：

var tabs = $( "#tabs" ).tabs();
var ul = tabs.find( "ul" );
$( "<li><a href='/url_for_tab/'>New Tab</a></li>" ).appendTo( ul );
tabs.tabs( "refresh" );

当您已经拥有内容时：

var tabs = $( "#tabs" ).tabs();
var ul = tabs.find( "ul" );
$( "<li><a href='#newtab'>New Tab</a></li>" ).appendTo( ul );
$( "<div id='newtab'><p>New Content</p></div>" ).appendTo( tabs );
tabs.tabs( "refresh" );

【讨论】：

add 和 remove 方法在 jQuery 1.9 中已被弃用，并在 1.10 中被删除。请改用刷新方法。 jQuery upgrade guide
由于某种原因，我无法让“刷新”方法工作，不得不求助于 tabs.tabs("destroy"); tabs.tabs(); - 我想这是刷新方法应该做的。 jQuery 1.7.2、jQueryUI 1.8.13（也许我应该更新这些）
为什么要弃用运行良好且易于使用的东西并用更困难的方法代替？我目前正在将一个旧网站从 jQuery 1.4 升级到 2.1.4，这远非简单...主要困难是所有已弃用的 jQuery 函数！
@Teevus 我同意。我仍然对为什么删除选项卡方法感到困惑。它们非常清晰且易于使用。新方法太可怕了！

【解决方案2】：

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;
}

【讨论】：

【解决方案3】：

我也在动态添加标签。

mytabs.tabs('add', '/url_for_tab/', 'New tab title');

用于添加新标签。在我的例子中，它是一个动态的 jsp 文件

【讨论】：

【解决方案4】：

您可能需要获取另外两个 jQuery UI 小部件：对话框和位置。

我也遇到了同样的问题：下载了演示，但操作.html 不起作用。就我而言，它在页面加载时引发错误：

$("#dialog").dialog is not a function
   close: function() {

页面有 404： jquery.ui.position.js jquery.ui.dialog.js

因此，该页面具有意外的依赖项，并且未包含在我的自定义下载中。我回去又从http://jqueryui.com/download获得了另一个自定义下载

一旦演示可以解析 jquery.ui.dialog.js 它就可以工作，因为对话框功能存在：

typeof $("#dialog").dialog
"function"

【讨论】：