0

当您首先在锚点加载页面然后导航回包含导航栏的主页（在 html 文件中找到的第一页）时，会发生此错误。

锚页面（刷新锚页面上的浏览器）：

manager.html?accountId=5#page-device-settings

使用链接导航回主页。

a href="#page-dashboard"

主页

manager.html?accountId=5

包含取自 ( https://api.jquerymobile.com/tabs/ )的导航栏示例

<div data-role="tabs">
  <div data-role="navbar">
    <ul>
      <li><a href="#fragment-1" class="ui-btn-active">One</a></li>
      <li><a href="#fragment-2">Two</a></li>
      <li><a href="#fragment-3">Three</a></li>
    </ul>
  </div>
  <div id="fragment-1">
    <p>This is the content of the tab 'One', with the id fragment-1.</p>
  </div>
  <div id="fragment-2">
    <p>This is the content of the tab 'Two', with the id fragment-2.</p>
  </div>
  <div id="fragment-3">
    <p>This is the content of the tab 'Three', with the id fragment-3.</p>
  </div>
</div>

在 chrome 调试器中，您可以看到抛出此错误。

Uncaught Error: Syntax error, unrecognized expression: :nth-child
at Function.db.error (jquery-2.1.0.min.js?_=1516664627221:2)
at Object.CHILD (jquery-2.1.0.min.js?_=1516664627221:2)
at ob (jquery-2.1.0.min.js?_=1516664627221:2)
at xb (jquery-2.1.0.min.js?_=1516664627221:2)
at Function.db (jquery-2.1.0.min.js?_=1516664627221:2)
at Function.a.find (jquery.mobile-1.4.5.js:1367)
at Function.a.find.matches (jquery.mobile-1.4.5.js:643)
at Function.o.filter (jquery-2.1.0.min.js?_=1516664627221:2)
at x (jquery-2.1.0.min.js?_=1516664627221:2)
at o.fn.init.filter (jquery-2.1.0.min.js?_=1516664627221:2)

版本：

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

任何人都知道为什么会发生这种情况以及如何解决它？

我不确定这是否重要，但有趣的是，在 Chrome 中使用 Spy 插件时，我可以看到以下请求触发了两次。在锚定页面的初始加载期间一次，然后在我导航回主页时再次。这仅在导航主页 -> 锚定页面 -> 主页时发生一次。

Method: Get    Type: html    URL: manager.html
4

1 回答 1

0

因此，我删除了所有代码，并能够使用这个基本示例获得预期的功能；因此，问题一定在我这边。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Dashboard</title>
    <meta charset="utf-8">
    <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-2.1.0.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head> 
<body> 


<!-- DASHBOARD -->
<div data-role="page" id="page-dashboard">

    <div data-role="header">
    </div><!-- /header -->

    <div data-role="content">

        <div data-role="tabs" id="tabs">
      <div data-role="navbar">
        <ul>
          <li><a href="#fragment-1" class="ui-btn-active">One</a></li>
          <li><a href="#fragment-2">Two</a></li>
          <li><a href="#fragment-3">Three</a></li>
        </ul>
      </div>
      <div id="fragment-1">
        <p>This is the content of the tab 'One', with the id fragment-1.</p>
      </div>
      <div id="fragment-2">
        <p>This is the content of the tab 'Two', with the id fragment-2.</p>
      </div>
      <div id="fragment-3">
        <p>This is the content of the tab 'Three', with the id fragment-3.</p>
      </div>
    </div>
    </div><!-- /content -->

</div><!-- /page -->
<!-- END DASHBOARD -->

<!-- DEVICES -->
<div data-role="page" id="page-device-settings">

    <div data-role="header">
        <h1>Device Settings</h1>
        <a href="#page-dashboard" id="pds-done" class="ui-btn-right" data-icon="check" data-inset="true" data-direction="reverse" data-transition="slidefade">Done</a>
    </div><!-- /header -->

    <div data-role="content">
    </div><!-- /content -->

</div><!-- /page -->

</body>
</html>

<script>
    var current_index = $("#tabs").tabs().tabs("option","active");
    $("#tabs").tabs('load',current_index);
</script>

注意1：我手动输入链接以从锚定页面开始：

manager.html?accountId=5#page-device-settings

注意 2：需要脚本代码来刷新主动选择的选项卡，否则所有选项卡将立即显示。

注 3：Get 请求只被调用一次

Method: Get    Type: html    URL: manager.html

解决方案编辑：通过在脚本部分添加以下块来修复我的代码。

var current_index = $("#tabs").tabs().tabs("option","active"); $("#tabs").tabs('load',current_index);

这也阻止了页面执行第二个 GET html 请求。也许有人可以提供更多关于那里发生的事情的细节。

于 2018-01-23T00:31:54.757 回答