javascript - $().load() 而不是加载整个页面，但需要在所有页面上保留菜单

我想使用 jQuery/AJAX $().load() 函数重新加载我网站的内容区域。但我的问题是无论输入 URL 是什么，header 和 footer 都需要显示在所有页面上。

我的网站是使用模板构建的，所以我的第一个想法是删除唯一内容上方和下方的布局输出，然后我会阻止 ie.菜单被显示两次。但我意识到，如果用户不是通过第一页进入我的网站，比方说 index.php，他永远不会看到页眉或页脚，只是一个没有样式的文本页面。

我的问题是，您将如何解决这个问题？允许使用 JavaScript (+ jQuery) 和 HTML5。

最佳答案

页面.php:

<div id="header"></di>
<div id="mainContent"></div>
<div id="footer"></div>

js:

$("#content").load("page.php #mainContent"); //that will only load mainContent

或:

$.get('page.php', function (data) {
    data = $(data).find('#mainContent').html();
    $("#content").empty().append(data);
});

有关更多信息，请参阅 jQuery 文档中有关 load() and page fragments 的部分

关于javascript - $().load() 而不是加载整个页面，但需要在所有页面上保留菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10166691/