$（）。load（）而不是加载整个页面，但需要在所有页面上保留菜单 [英] $().load() instead of loading whole page, but need to keep menu on all pages

问题描述

我想用jQuery / AJAX $（）。load（）函数重新加载我网站的内容区域。但我的问题是，无论您的输入网址如何，都需要在所有网页上显示标头和页脚。

I want to reload on the content area of my website with jQuery/AJAX $().load() function. But my problem is that the header and footer needs to be displayed on all pages no matter your entry URL.

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

My site is build using templates, so my first thought was to remove the output of the layout above and below the unique content, as I would then prevent ie. the menu from being displayed twice. But I realized that if the user is not entering my site through the first page, lets say index.php, he won't ever see header or footer just an unstyled text page.

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

My question is, how would you work around this issue? JavaScript (+ jQuery) and HTML5 is allowed.

推荐答案

page.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（）和页面片段

For more information, see the section in the jQuery documentation on load() and page fragments

这篇关于$（）。load（）而不是加载整个页面，但需要在所有页面上保留菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！