0

私のサイトには上部にナビゲーション バーがあり、クリックされた各カテゴリは、コンテンツを含む div を下にスライドします。ただし、現時点では、サイトにアクセスすると、このすべてのコンテンツが一度に読み込まれます。記事、投稿、画像などを追加すると、これはまったく不要になります。

外部ファイルからコンテンツを動的にロードしたい (たとえば、navbar の「about」をクリックすると、スライドして「about.html」のコンテンツが div に表示されます)。組織的な理由から、後で簡単に編集できるように、各セクションに独自の .html ファイルを用意したいと考えていました。基本的に、jquery で "*variableSectionName".html" のようなラッパー div を div にロードする必要があります。

これがjqueryコードで、変数「セクション」を使用してそのdiv idのコンテンツを表示します。これは正しく動作しますが、.load(section+".html"+id) のようなものをロードする jquery .load() を取得できません:

    $(document).ready(function() {
    var active_section;
    $("#slider a.section").click(function(e) {
        e.preventDefault();
        var section = $(this).attr('href');
        if (section !== active_section) {
            $('.pagedrop').slideUp('slow');
            $('.lower').find(section).slideDown('slow', function() {
            active_section = section;
            });
        }
    });
});

index.html 内のリンクは次のようになります。これらのいくつかは名前が異なります。私の現在のjqueryコードはこれからhref "#about"を取得し、それを使用して一度に1つのセクションのみを表示します:

<a href="#about" id="aboutlink">
<h2><span>About</span></h2>
</a>

index.html には、次のように、既にコンテンツ用にフォーマットされた div が含まれています。

    <div class="lower">
        <div class="pagedrop" id="content">
<!-- Container to lazy-load content on a per page basis -->
        </div>
    </div>

これは、外部ファイルの 1 つがどのように見えるかのサンプルです。これらの外部ファイルは単なるブロックであり、通常の html/head/body タグは含まれていません:

<div id="about">
        <h1>About</h1><img src="images/divider.png"/>
        <p><p:first-letter>Q</p:first-letter>uisque venenatis interdum purus, non sagittis turpis feugiat vel. Mauris accumsan luctus lacus, sed facilisis est vehicula eget. Etiam tempor lacus ac fermentum facilisis. Donec semper urna quis odio lobortis dignissim. Duis et metus non arcu venenatis dapibus ut sit amet enim. Nullam quis elit odio. Donec ultrices tincidunt nulla at vestibulum. Pellentesque risus ligula, mollis eget est nec, rhoncus ultricies nunc. Aenean scelerisque risus suscipit enim sollicitudin commodo.
        </p>
        </div>

つまり、「about.html」から「index.html」のボックスにロードしたい

4

2 に答える 2

2

jquery の .load() 関数を見てください。詳細については、jquery API ( http://api.jquery.com/load/ ) を参照してください。

別の HTML ページからページ全体または特定の div/セクションをロードできる必要があります。

.load と .live を使用したコード例 これは .live で動作するはずです

$(document).ready(function () {
    $("a.view").live('click', function () {
        var id = $(this).data("id");
        $('#container').load("view.php?" + id,myCallback);
    });
});

ここから参照: How do I change dynamic page title while .load()

于 2013-09-25T05:01:29.563 に答える