2

たとえば、リンクがあるとしhttp://www.example.com/index.html#xyzます。ブラウザーで開くとwww.example.com/index.html正常に動作しますが、同じページを対象とするリンクがあると、ajax を介し#xyzて新しいページが読み込まれます。data-role=content

と同じ URL に直接アクセスすると、特定のページではなく がhttp://www.example.com/index.html#xyz読み込まれます。www.example.com/index.html#xyz

これを機能させる方法はありますか？

注:#xyzページのコンテンツは動的に読み込まれます。

4

1 に答える 1

0

rel="external"リンクに追加してみてください。問題ありません。

例：

2 つの HTML ファイル (index.htmlとpage.html) があり、page.html2 つの jQuery Mobile ページ ( と ) が含まれている#p1とします#p2。

ここで、リンクをクリックして#p2からアクセスしたいとします。index.html<a>

rel="external"次のようにリンクに追加する必要があります。

<a href="page.html#p2" rel="external">GO TO PAGE 2 !</a>

完全な例:

index.html:

<!DOCTYPE html>
<html>
<head>    
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>

</script>
</head>    

<body>

<div data-role="page">      
  <div data-role="content">      
    <h1>INDEX.HTML</h1>

    <!-- YOUR LINK TO ACCESS #P2 IN PAGE.HTML -->
    <a href="page.html#p2" rel="external">GO TO PAGE 2 "#P2" !</a>    
  </div>    
</div>

</body>
</html>

page.html:

<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

</head>    

<body>

    <!-- PAGE 1 #P1 -->
    <div data-role="page" id="p1">    
        <div data-role="content">
    <h1>PAGE 1</h1>
        </div>
    </div>

    <!-- PAGE 2 #P2 -->
    <div data-role="page" id="p2">
        <div data-role="content">
        <h1>PAGE 2</h1>
        </div>
    </div>
</body>

</html>
于 2012-10-14T23:15:58.223 に答える