Question

我正在使用.load()在页面中加载外部内容。

在我index.html我有这段代码：

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

和

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

所以，在我的inicial.html我有contact.html的其他链接，当有人点击该链接时（inicial.html内的联系人链接），我需要替换inicial.html在contact.html

页面的同一div #conteudo_mostrar内包含index.html

怎么做？

Answer 1

您可以使用.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);
        });
    });
});

Answer 2

基于问题澄清的修订：

这很简单。您只需要使用live链接类/ ID。这会将链接绑定到页面上可能尚不存在的元素。然后，在绑定点击事件中，只需加载content.html，如下所示：

$(document).ready(function(){
    // Load the initial content
    $("#conteudo_mostrar").load("inicial.html");
    $("#contact_link").live("click", function() {
        $("#conteudo_mostrar").load("contact.html");
    }
});

jQuery .load（） - 通过加载内容中的链接将外部页面中的内容加载到同一页面中

2 个答案: