<分区>
是否有任何 jquery 插件可用于在 HTML 页面中保留通用的页眉和页脚？
就像我可以将 header.html 和 footer.html 添加到 index.html 中一样。
我知道我可以使用 php，但如果可能的话，我想在本地 PC 上不安装任何服务器。完成所有工作后，我将使用 php includes
header.html
<title>Template</title>
<meta name="description" content="">
<link rel="stylesheet" href="css/styles.css?v=1.0">
<script src="js/modernizr-2.0.6.min.js"></script>
index.html
{include header.html}
<body class="home">
{include footer.html}
Footer.html
<footer class="f1">
<p>copyright © year</p>
</footer><!-- .f1 -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="js/general.js"></script>
</body>
</html>
jQuery 本身有一些功能可以让您做到这一点。如果您可以在每个页面上选择页眉/页脚的容器，您可以插入任何您想要的通用内容，甚至替换现有内容。
jQuery 替换站点的公共(public)部分
你可以这样做:
jQuery(function(){
jQuery('.header').html('SOME COMMON HEADER');
jQuery('.footer').html('SOME COMMON FOOTER');
});
在此处查看实际效果:http://jsfiddle.net/6sCfm/
jQuery 将外部文件加载到容器中
或者，如果你坚持加载外部文件，你可以这样做(使用 .load() ):
jQuery(function(){
jQuery('.header').load('header.html');
jQuery('.footer').load('footer.html');
});
但要注意您作为参数提供的正确路径，并确保文件应该只有您需要的 HTML(没有 <head>、<body> 标签等 - 它会使 HTML 不正确)。
将部分页面加载到容器中
如果您有整个页面(使用 <head> 、 <header> 等)，您可以只加载其中的一部分。最好为要加载的部分提供有意义的 ID(例如 header 和 footer)，并在路径中的空格后作为选择器提供它们:
jQuery(function(){
jQuery('.header').load('header.html #header');
jQuery('.footer').load('footer.html #footer');
});
这应该足够灵活:)