是否有任何jquery插件可以在HTML页面中保留常见的页眉和页脚?

Jit*_*yas 6 html javascript jquery jquery-plugins

是否有任何jquery插件用于在HTML页面中保持公共页眉和页脚?

就像我可以将header.html和footer.html添加到index.html中一样.

我知道我可以使用php,但如果可能的话,我想不用在我的本地PC上安装任何服务器.完成所有工作后,我将使用PHP包括

了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>
Run Code Online (Sandbox Code Playgroud)

的index.html

{include header.html}

<body class="home">

{include footer.html}
Run Code Online (Sandbox Code Playgroud)

Footer.html

<footer class="f1">
    <p>copyright &copy; 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>
Run Code Online (Sandbox Code Playgroud)

Tad*_*eck 13

jQuery本身有一些允许你这样做的功能.如果您可以在每个页面上选择页眉/页脚的容器,则可以插入所需的任何常用内容,甚至可以替换现有内容.

jQuery替换站点的常见部分

你可以这样做:

jQuery(function(){
    jQuery('.header').html('SOME COMMON HEADER');
    jQuery('.footer').html('SOME COMMON FOOTER');
});
Run Code Online (Sandbox Code Playgroud)

在这里看到它:http://jsfiddle.net/6sCfm/

jQuery将外部文件加载到容器中

或者,如果您坚持加载外部文件,则可以执行此操作(使用.load()):

jQuery(function(){
    jQuery('.header').load('header.html');
    jQuery('.footer').load('footer.html');
});
Run Code Online (Sandbox Code Playgroud)

但要注意你提供的正确路径作为参数,并确保文件应该只有你需要的HTML(不<head>,<body>标签等 - 它会使HTML不正确).

将部分页面加载到容器中

如果你有整页(有<head>,<header>等),可以加载它们的唯一部分.最好为要加载的部分提供有意义的ID(例如.headerfooter),并在空格后的路径中作为选择器提供它们:

jQuery(function(){
    jQuery('.header').load('header.html #header');
    jQuery('.footer').load('footer.html #footer');
});
Run Code Online (Sandbox Code Playgroud)

这应该足够灵活:)