jQuery UI 选择新标签时标签默认标签的内容没有被隐藏？

Question

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

还试图找出 x 按钮无法关闭选项卡的原因

HTML:

<head>
  <meta charset="utf-8">
  <!-- stylesheets-->
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
</head>

<body>
  <div>
    <div id="tabs">
      <ul class="ui-tabs-nav">
        <li id="liTabs-0"><a href="tabs-0">Home</a></li>
      </ul>
      <div id="tabs-0">
        <div class="row justify-content-md-center">
          <div class="text-center">
            <button type="button" class="btn btn-secondary" id="saveTable">New Tab</button>
          </div>
        </div>
        <table id="resultTable-0">
          <tbody>
            <tr>
              <td></td>
              <td>0</td>
              <td>1</td>
              <td>2</td>
              <td>3</td>
            </tr>
            <tr>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              </tr>
            <tr>
              <td>1</td>
              <td>0</td>
              <td>1</td>
              <td>2</td>
              <td>3</td>
            </tr>
            <tr>
              <td>2</td>
              <td>0</td>
              <td>2</td>
              <td>4</td>
              <td>6</td>
            </tr>
            <tr>
            <td>3</td>
            <td>0</td>
            <td>3</td>
            <td>6</td>
            <td>9</td>
          </tr>
         </tbody>
        </table>
      </div>
    </div>
  </div>
  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <!-- jQuery UI Plugin-->
  <script src="https://code.jquery.com/ui/jquery-ui-git.js"></script>
</body>

</html>

JS:

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

Answer 1

标签中缺少#。更改以下行：

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

对此（在 href 中添加 #）：

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

您的问题中没有删除标签的代码。

jQuery UI 选择新标签时标签默认标签的内容没有被隐藏？

jQuery UI Tab default tab's contents not being hidden when selecting new tab?

jquery

tabs

jquery-ui