jQuery Mobile 选项卡禁用（）：未捕获错误：jQuery UI 选项卡：片段标识符不匹配答案

【问题标题】：jQuery Mobile tabs disable(): Uncaught Error: jQuery UI Tabs: Mismatching fragment identifierjQuery Mobile 选项卡禁用（）：未捕获错误：jQuery UI 选项卡：片段标识符不匹配
【发布时间】：2015-11-13 17:18:13
【问题描述】：

在标签上使用 disable() 后出现错误。每当我点击其中一个标签时使用 disable() 后：

未捕获的错误：jQuery UI 选项卡：片段标识符不匹配。

在日志上（在 Chromium 中）。不过，没有明显的故障；选项卡切换按预期工作。

我想知道是我做错了什么还是这是 jQuery Mobile 中的一个错误。

查看示例：

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
    href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script
    src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<script>
$(document).ready(function() {
    var disabledTabs = [ 1 ];
    $('#navbar').tabs({disabled: disabledTabs});
});
</script>

</head>
<body>
    <div data-role="tabs" id="tabs">
        <div id="navbar" data-role="navbar">
            <ul>
                <li><a href="#one" data-ajax="false">one</a></li>
                <li><a href="#two" data-ajax="false">two</a></li>
                <li><a href="#three" data-ajax="false">three</a></li>
            </ul>
        </div>
        <div id="one" class="ui-body-d ui-content">First</div>
        <div id="two" class="ui-body-d ui-content">Second</div>
        <div id="three" class="ui-body-d ui-content">Third</div>
    </div>

</html>
</body>

提前致谢

【问题讨论】：

标签： jquery jquery-ui jquery-mobile jquery-tabs

【解决方案1】：

问题在于标签小部件与 DIV id="tabs" 相关联，而不是导航栏 div。

所以不是

$('#navbar').tabs({disabled: disabledTabs});

改成

$('#tabs').tabs({disabled: disabledTabs});

【讨论】：

也有效！太好了，45 英尺内有 2 个解决方案。也谢谢你。可悲的是，我太年轻了（Stackoverflow 方面），所以我无法投票给你的答案。

【解决方案2】：

您的数据<div> 应该在主navbar div 中，如下所示：

<div id="navbar" data-role="navbar">
    <ul>
        <li><a href="#one" data-ajax="false">one</a></li>
        <li><a href="#two" data-ajax="false">two</a></li>
        <li><a href="#three" data-ajax="false">three</a></li>
    </ul>
    <div id="one" class="ui-body-d ui-content">First</div>
    <div id="two" class="ui-body-d ui-content">Second</div>
    <div id="three" class="ui-body-d ui-content">Third</div>
</div>

因此，您会遇到此类异常。只需更正 HTML，代码即可正常运行。

【讨论】：