jquery - JQuery Mobile の内部ハッシュ リンクが機能しない

Question

JQuery Mobile を使用してモバイル Web サイトを作成しています。div にリンクする内部リンクがあります。最初のリンクは機能しますが、リンクとテキスト以外はまったく同じ形式の 2 番目のリンクは機能しません。何か理由は？

Answer 1

コードで複数data-role="page"の を使用していますか? その場合は、サブページウィジェットを使用して、子の を " " に置き換える
必要があります。pagesubpage

jQuery Mobile Docsから- リンク ページ

注: 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 リンクの 1 つをクリックすると、「ページのロード中にエラーが発生しました」というエラーが発生します。残念ながら、「rel='external'」や「data-ajax='false'」などを追加しても、あまり良い結果は得られません。私は自分でこの問題の解決策を研究している最中です。

アップデート

私は少しの JavaScript (jQuery) を使ってこの問題を自分で回避しました。各 quick_nav_menu リンクをつかみ、それぞれにクリック イベントをアタッチします。クリック イベントは、各ハイパーリンクの href 属性を抽出し、それをハッシュ タグで分割します。これにより、[, headerId] という 2 つの要素 (最初の要素は空) を持つリストが生成されます。2 番目のリスト項目 (見出しの 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 ブラウザーの [戻る] ボタンを押しても、ユーザーは quick_nav_menu に戻らず、以前の jquery Mobile ページにスクロールして戻りますが、私の目的には十分に機能します。