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

Question

我有一个aspx页面,我有2个静态jquery选项卡.单击其中一个选项卡上的按钮,我想动态添加一个新选项卡,从其他aspx页面加载其内容.我也有尝试使用以下示例

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

我已经下载了jquery-ui-1.8rc3.custom zip文件,并尝试将上面的相关脚本,css文件添加到我的asp.net网站并运行,但它似乎没有用.我也不想要打开一个对话框,要求用户输入标签标题,如上例所示.

请有人帮我这个吗？

谢谢.

Answer 1

您是否尝试过使用标签的添加方法？

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