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>

在javasscript中:

$(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不能有#.