Question

我目前正在开发一个网站，其中导航栏链接将无缝地导向另一个页面，其中包含渐变过渡而无需加载。

单击链接后，具有主页内容和页脚的div#page块将淡出，自行清空，并使用href的内容淡入。点击链接。但是，我的当前代码（如下所示）将整个页面的html（包括head内容）放在div#page上，而不仅仅是div#page的内部HTML。

$("#header .menu a, #header .logo").click(function() {
    var href = $(this).attr("href");
    var title = $(this).attr("title");

    history.pushState(null, title, href);

    $("#page").fadeOut("slow", function() {
        $("#page").delay(1000).empty();
    });

    $("#page").load(href + "#page", function() {
        $("#page").fadeIn();
    });

    return false;
});

Answer 1

来自docs

与$ .get（）不同，.load（）方法允许我们指定要插入的远程文档的一部分。这是通过url参数的特殊语法实现的。如果字符串中包含一个或多个空格字符，则假定第一个空格后面的字符串部分是jQuery选择器，用于确定要加载的内容。

所以尝试添加像这样的白色空间

$("#page").load(href + " #page", function() { //White space before #page
    $("#page").fadeIn();
});

PS：我还没有测试过此代码。

Answer 2

两个选项：

推荐的方法是创建一个返回的API 仅限内部HTML。

解析响应（例如）：

var $dom = $('<div />');
$dom.html(response);
var $content = $dom.find('#id'); // #id is your inner content id

现在您应该能够使用$content.html()插入内部内容。

如何从另一个页面加载div的内部html？

2 个答案: