0

に基づいた Web ページを開発していhtml5ます。私のページにはnav、選択したコンテンツを含むいくつかのコンテナーが必要です。しかし、メニューの位置をクリックした後にページをリロードしたくありません。

最初は、コンテンツ全体をサイトに配置し、一部を非表示にして、クリック後に表示することを考えました。

これの非常に簡単な例

しかし、隠されているコンテンツがたくさんあり、これが良い考えかどうかはわかりません.

次に、javascript を使用してファイルのコンテンツを.htmlインクルードし、それらをサイトに配置することを考えましたが、私のちょっとした調査では、これは非常に悪い習慣であることがわかりました。とある記事。

また、これは小さくてシンプルなページであり、バックエンド テクノロジを使用したくありません。

だから、私の質問は次のとおりです。これを行うためのベストプラクティスは何ですか?

どんな助けでも大歓迎です。

4

1 に答える 1

1

最善の方法はわかりませんが、 jQuery.load()と一緒にjQuery.ajaxSetup()を使用することをお勧めします。

まず、.ajaxSetup()将来のajaxリクエストをキャッシュできるように使用します。

$.ajaxSetup({
    cache: true
});

.click()次に、を使用するイベントをバインドします.load()。

これが私の例のコードです...

HTML：

<ul id="nav">
    <li id="first">first</li>
    <li id="second">second</li>
    <li id="last">last</li>
</ul>
<ul id="contents">
    <li id="content1">first</li>
    <li id="content2">second</li>
    <li id="content3">last</li>
</ul>

JAVASCRIPT：

$(document).ready(function(){
    $.ajaxSetup({
        cache: true
    });

    $('#nav>li').click(function(){
       var url = 7;
       index = $(this).index();
        url += index;
       $('#content' + (index + 1)).load('http://fiddle.jshell.net/dirtyd77/jUEEd/' + url + '/show/');
    });   
});

デモ：http： //jsfiddle.net/dirtyd77/jUEEd/13/

これがお役に立てば幸いです。ご不明な点がありましたらお知らせください。

于 2013-02-25T22:22:52.040 に答える