jQuery UI选项卡默认选项卡'；选择“新建”选项卡时是否未隐藏s内容？

我正在尝试使用jQueryUI创建一个页面，该页面从一个选项卡和该选项卡的一个元素开始，然后能够动态添加新选项卡。当选择其他选项卡时，原始选项卡的元素应该隐藏，但出于某种原因，它对我来说仍然可见

还试图找出为什么x按钮无法关闭选项卡

小提琴：

HTML:

新标签页
0
1.
2.
3.
0
0
0
0
0
1.
0
1.
2.
3.
2.
0
2.
4.
6.
3.
0
3.
6.
9

JS:

var tabCounter=0；
var tabTitle=$（“#tab_title”）
var tabTemplate=“
删除选项卡”
var tabs=$（“#tabs”）.tabs（）；
$（函数（）{
$（“#保存表”）。单击（函数（）{
addTab（）；
});
});
函数addTab（）{
tabCounter++；
var label=tabTitle.val（）| |“Tab”+tabCounter，
id=“tabs-”+tabCounter，
li=$（tabTemplate.replace（/#\{href\}/g，“#”+id）。replace（/#\{label\}/g，label）），
tabTableHtml=“”
tabs.find（“.ui tabs nav”）.append（li）；
tabs.append（“+tabTableHtml+”）；
制表符。制表符（“刷新”）；
}

缺少#in选项卡。更改以下行：

<li id="liTabs-0"><a href="tabs-0">Home</a></li>

为此（在href中添加#）：

没有代码可以删除问题中的选项卡

var tabCounter = 0;
var tabTitle = $( "#tab_title" )
var tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>"
var tabs = $("#tabs").tabs();

$(function() {
  $("#saveTable").click(function(){
    addTab();
  });
});

function addTab() {
  tabCounter++;
  var label = tabTitle.val() || "Tab" + tabCounter,
    id = "tabs-" + tabCounter,
    li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
    tabTableHtml = "<table id=\"resultTable-" + tabCounter + "\"></table>"

  tabs.find( ".ui-tabs-nav" ).append( li );
  tabs.append( "<div id='" + id + "'>" + tabTableHtml + "</div>" );
  tabs.tabs( "refresh" );
}

<li id="liTabs-0"><a href="tabs-0">Home</a></li>

<li id="liTabs-0"><a href="#tabs-0">Home</a></li>