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

Question

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

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

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

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

谢谢。

Answer 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" );