2

我正在使用.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_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

基于问题澄清的修订：

这很简单。您只需要使用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");
    }
});
于 2012-06-21T13:48:19.503 回答