Question

我正在使用JQuery Mobile创建一个移动网站。我有链接到div的内部链接。第一个工作，但第二个链接，除了链接和文本，具有完全相同的格式，不起作用。有什么理由吗？

Answer 1

您是否在代码中使用了多个data-role="page"？如果是这样，您需要使用subpage窗口小部件并将子项page替换为“subpage”。

注意：您无法链接到激活Ajax导航的多页文档，因为框架只会加载它找到的第一个页面，而不是整个内部页面集。在这些情况下，您必须在没有Ajax的情况下进行链接（请参阅下一节）以进行整页刷新以防止潜在的哈希冲突。目前有一个子页面插件可以加载多页文档。

Answer 2

我认为OP（可能）问的是，他/她有一些带有“快速导航”菜单系统的页面，可以跳到特定的标题，而无需手动向下滚动到每个单独的标题 - 经常发现的事情（或者，无论如何）在冗长的页面上使用一些内容。类似的东西：

<div id="quick_nav_menu">
    <a href="#heading1">Heading 1</a>
    <a href="#heading2">Heading 2</a>
... <a href="#headingLast">Last Heading</a>
</div>
...
<h1 id="heading1">Heading 1</h1>

单击其中一个quick_nav_menu链接会导致“错误加载页面”...错误。不幸的是，添加诸如“rel ='external'”或“data-ajax ='false'”之类的东西并没有产生更好的结果。我自己正在研究解决这个问题的方法。

<强>更新

我自己用一点JavaScript（jQuery）解决了这个问题。我抓住每个quick_nav_menu链接，并为每个链接附加一个点击事件。 click事件提取每个超链接的href属性，在hash标记处将其拆分，这会产生一个包含两个元素的列表（第一个元素为空）：[，headerId]。它抓取第二个列表项（标题的ID），并使用scrollIntoView（）JavaScript方法向下滚动到它。然后它返回“false”以禁止超链接的默认行为。

实施例

$(document).ready(function () {
    $("#quick_nav_menu a").click(function () {
        var href = $(this).attr("href");
        var headerId = href.split("#")[1];
        document.getElementById(headerId).scrollIntoView();
        return false;
    });
});

不幸的是，在Web浏览器上按 back 按钮不会让用户返回到quick_nav_menu，而是滚动回到之前的jquery Mobile页面，但它对我的目的来说效果很好。

JQuery Mobile内部哈希链接不起作用

2 个答案: