时间戳

首页 > 解决方案 > 选择新选项卡时，jQuery UI Tab 默认选项卡的内容没有被隐藏？

jquery - 选择新选项卡时，jQuery UI Tab 默认选项卡的内容没有被隐藏？

问题描述

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

还试图弄清楚为什么 x 按钮不会关闭选项卡

小提琴： https ://jsfiddle.net/rfkzha2p/

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

标签： jqueryjquery-uitabs

解决方案

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

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

为此（在href中添加#）：

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

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

推荐阅读