jQuery UI选项卡错误:片段标识符不匹配

Question

我的代码:

<div id="tablesTabs">
        <ul>
            <li><a id="changed" href="#changedTable"><% "Changed" %></a></li>
            <li><a id="unchanged" href="#changedTable"><% "Unchanged"%></a></li>
        </ul>
    </div>
<div id="tablesDiv">
        <div id="changedTable" style="width:100%; height:430px;"></div>
    </div>

在javascript中:

$(function () {
        $("#tablesTabs").tabs({
            cache: true
        }).scrollabletab();
        loadTables();
    });
if ($('#tablesTabs').tabs("option", "selected") == 0) {
    //fill table with data
}
if ($('#tablesTabs').tabs("option", "selected") == 1) {
    //fill table with other data
}

第一个选项卡看起来不错，网格也不错。但当我点击第二个选项卡，我得到错误未捕获的jQuery UI选项卡:不匹配的片段标识符。问题是什么?如何解决?

Answer 1

首先，我会看看如果问题是，你的两个选项卡有相同的链接在他们的href属性。两者都有#changedTable，尝试为每个选项卡提供唯一的href。

其次,你的TAB设置看起来很陌生。也许这很好，但我总是把内容div放在标签div里面。

:

<div id="tabs">
  <ul>
    <li><a href="#tab-1">Something</a></li>
    <li><a href="#tab-2">Something else</a></li>
  </ul>
  <div id="tab-1">
    <p>Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla.</p>
  </div>
  <div id="tab-2">
    <p>Curabitur ornare consequat nunc. Aenean vel metus.</p>
  </div>
</div>

Answer 2

标签的href必须有#符号，标签内容的id不能有#。

Answer 3

我的例子是标签外的标签内容，根据官方JQuery示例https://jqueryui.com/tabs/

<!-- error  -->
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
</div>
  <div id="tabs-1">
    <p>abc.</p>
  </div>
  <div id="tabs-2">
    <p>def.</p>
  </div>
  <div id="tabs-3">
    <p>ghi.</p>
  </div>
<!-- correct -->
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <p>abc.</p>
  </div>
  <div id="tabs-2">
    <p>def.</p>
  </div>
  <div id="tabs-3">
    <p>ghi.</p>
  </div>
</div>