jQuery UI 选项卡中的错误：片段标识符不匹配。
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15156294/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Error in jQuery UI Tabs: Mismatching fragment identifier.
提问by petko_stankoski
Here's my code:
这是我的代码：
<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>
And in a javasscript:
在 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
}
The first tab seems fine, the grid is alright. But when I click on the second tab I get error Uncaught jQuery UI Tabs: Mismatching fragment identifier. What is the problem and how to fix it?
第一个选项卡看起来不错，网格没问题。但是，当我单击第二个选项卡时，出现错误 Uncaught jQuery UI Tabs: Mismatching fragment identifier。有什么问题以及如何解决？
回答by Tapirboy
First,
I would see if the problem is that your two tabs have identical link in their href-attribute. Both have #changedTable, try having unique href for each tab.
首先，我会看看问题是否是您的两个标签在其 href 属性中具有相同的链接。两者都有#changedTable，请尝试为每个选项卡设置唯一的 href。
Secondly, your tab setup looks unfamiliar to me. Maybe it's fine but I always have the content divs inside the tab div.
其次，你的标签设置对我来说看起来很陌生。也许这很好，但我总是在选项卡 div 内有内容 div。
As:
作为：
<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>
回答by Nalan Madheswaran
The href of tab should have the # symbol and the id of the tab content can not have the #.
tab 的href 应该有# 符号，tab 内容的id 不能有#。
回答by Pablo Alejandro Perez Acosta
My case was the tab content where outside the tag, according to the official JQuery Example https://jqueryui.com/tabs/
根据官方的 JQuery Example 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>
