4

フォローアップの質問として：水平スライドレイアウトを行う最も効率的な方法は、そのような単一ページレイアウトを使用するときに、ブラウザの戻るボタンと進むボタンを機能させることは可能ですか？

4

3 に答える 3

5

HTML5の履歴APIを使用してそれを実現できます。

始めるためのいくつかのリソースは次のとおりです。

古いブラウザでもサポートを受けるために、それを可能にするJavaScriptライブラリがあります。

履歴APIを使用するChromeチームによる高度な例：

于 2012-09-09T10:31:48.093 に答える
2

はい、HTML5履歴APIを使用して実装できます。

于 2012-09-09T10:32:06.347 に答える
0

以前の方法では、ブックマークを使用してみることができます。

    <html>
    <head>
        <script type="text/javascript">
            function goPage (v) {
                var idisplay = v == 'i',
                    adisplay = v == 'a',
                    bdisplay = v == 'b';
                document.getElementById('anchor_i').style.display = idisplay? 'none' : 'block';
                document.getElementById('anchor_a').style.display = adisplay? 'none' : 'block';
                document.getElementById('anchor_b').style.display = bdisplay? 'none' : 'block';

                document.getElementById('content_i').style.display = idisplay? 'block' : 'none';
                document.getElementById('content_a').style.display = adisplay? 'block' : 'none';
                document.getElementById('content_b').style.display = bdisplay? 'block' : 'none';
            }
        </script>
    </head>
    <body>
        <a name="index"></a>
        <div id="content_i">
            index
        </div>

        <a id="anchor_i" href="#index" onclick="goPage('i');" style="display: none">to index</a>
        <a id="anchor_a" href="#page_a" onclick="goPage('a');">to page_a</a>
        <a id="anchor_b" href="#page_b" onclick="goPage('b');">to page_b</a>

        <a name="page_a"></a>
        <div id="content_a" style="display: none">
            page a
        </div>
        <a name="page_b"></a>
        <div id="content_b" style="display: none;">
            page b
        </div>
    </body>
</html>
于 2012-09-09T11:24:07.523 に答える