0

誰かが私を悲惨な状態から解放し、なぜこれがうまくいかないのか教えてもらえますか?

簡単な 2 ページのテスト サイトがあります。各ページにはヘッダーと他のページへのリンクがあります。そのため、クリックするだけで次のページに移動したり、戻ることができます。

サイトが読み込まれると、すべて問題なく表示されます - ページ 1 がヘッダー付きで表示されます。ページ 2 へのボタンをクリックすると、ページが読み込まれますが、ヘッダーはページ 1 のようにレンダリングされません。

このような単純なテストのために特別なことをする必要はないと思いましたが、何が問題なのかわかりません。

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <title>Mobile Test</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body> 
    <div data-role="page" id="pg_1">
        <div data-role="header" data-position="fixed">
            <h1>Page 1</h1>
        </div>
        <div data-role="content">
            <a data-role="button" data-rel="close" href="#pg_2">Goto Page 2</a>
        </div>
    </div>
    <div data-role="page" id="pg_2">
        <div data-role="header" data-position="fixed">
            <h1>Page 2</h1>
        </div>
        <div data-role="content">
            <a data-role="button" data-rel="close" href="#pg_1">Goto Page 1</a>
        </div>
    </div>
</body>
</html>

jQuery 1.7 でも試してみましたが、同じ結果でした。

私はばかげたことをしているに違いないのですが、それを見ることができません。どんな助けも大いに感謝します。

よろしくナイモア

編集：私は初心者なので画像を追加できませんが、私が探しているページ1とページ2は次の場所で見ることができます

http://i104.photobucket.com/albums/m186/Nymor/misc/jqm_t1-1.png
http://i104.photobucket.com/albums/m186/Nymor/misc/jqm_t1-2.png
4

1 に答える 1

0

リンクから削除する必要がありdata-rel="close"ます。

解決策は次のとおりです。

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <title>Mobile Test</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body> 
    <div data-role="page" id="pg_1" data-position="fixed">
        <div data-role="header">
            <h1>Page 1</h1>
        </div>
        <div data-role="content">
            <p><a data-role="button" href="#pg_2">Goto Page 2</a></p>
        </div>
    </div>
    <div data-role="page" id="pg_2" data-position="fixed">
        <div data-role="header">
            <h1>Page 2</h1>
        </div>
        <div data-role="content">
            <p><a data-role="button" href="#pg_1">Goto Page 1</a></p>
        </div>
    </div>
</body>
</html>
于 2012-05-01T14:14:58.957 に答える