2

を使用してページ内に外部コンテンツを読み込んでいます.load()。

私の中にindex.htmlはこのコードがあります：

$(document).ready(function(){
   $("#conteudo_mostrar").load("inicial.html");
});

と

<div id="conteudo_mostrar"></div>

だから、私の中にinicial.htmlは別のリンクがcontact.htmlあり、誰かがそのリンク（内の連絡先リンク）をクリックすると、ページの同じdiv内に含めるinicial.htmlためにを置き換える必要がありますinicial.htmlcontact.html#conteudo_mostrarindex.html

どうやってするか？？

4

2 に答える 2

3

次のリンクを使用.get()して、次のリンクがあると想定できますcontact.html。

<a href="contact.html" id="lnkContact">Contact</a>

それで：

$(document).ready(function() {
    $.get('inicial.html', function(data) {
        $('#conteudo_mostrar').html(data);
    });

    $('#lnkContact').live('click', function(e) {
        e.preventDefault();
        $.get((this).attr('href'), function(data) {
            $('#conteudo_mostrar').html(data);
        });
    });
});

さらにリンクを追加する場合は、すべてに対して同じことを行いますid。別のリンクがある場合は、次のように言いましょうgallery.html。

<a href="gallery.html" id="lnkGallery">Gallery</a>

のコードと同じように、コードに追加するだけで、次のようlnkContactに変更できlnkGalleryます。

$('#lnkGallery').live('click', function(e) {
    e.preventDefault();
    $.get((this).attr('href'), function(data) {
        $('#conteudo_mostrar').html(data);
    });
});

コード全体は次のようになります。

$(document).ready(function() {
    $.get('inicial.html', function(data) {
        $('#conteudo_mostrar').html(data);
    });

    $('#lnkContact').live('click', function(e) {
        e.preventDefault();
        $.get((this).attr('href'), function(data) {
            $('#conteudo_mostrar').html(data);
        });
    });

    $('#lnkGallery').live('click', function(e) {
        e.preventDefault();
        $.get((this).attr('href'), function(data) {
            $('#conteudo_mostrar').html(data);
        });
    });
});

そして、他のすべてのリンクについては、同じ変更を加える必要があります。id各リンクを区別するための属性がある場合。

プレストンによるより効率的な方法

linkクラスごとに各リンクにタグを付けます。

<a href="contact.html" class="link">Contact</a>
<a href="gallery.html" class="link">Gallery</a>

それで：

$(document).ready(function() {
    $.get('inicial.html', function(data) {
        $('#conteudo_mostrar').html(data);
    });

    $('.link').live('click', function(e) {
        e.preventDefault();
        $.get((this).attr('href'), function(data) {
            $('#conteudo_mostrar').html(data);
        });
    });
});
于 2012-06-21T13:47:35.223 に答える
2

質問の明確化に基づく改訂：

とても簡単です。リンククラス/IDへのライブを使用する必要があります。これにより、ページにまだ存在していない可能性のある要素にリンクがバインドされます。次に、bind clickイベント内で、次のようにcontent.htmlをロードします。

$(document).ready(function(){
    // Load the initial content
    $("#conteudo_mostrar").load("inicial.html");
    $("#contact_link").live("click", function() {
        $("#conteudo_mostrar").load("contact.html");
    }
});
于 2012-06-21T13:48:19.503 に答える