問題描述
是否有任何 jquery 插件可用于在 HTML 頁面中保留公共頁眉和頁腳?
Is there any jquery pluginto use to keep common header and footer in a HTML page?
如果我可以將 header.html 和 footer.html 添加到 index.html 中.
Like if i can add header.html and footer.html into index.html.
我知道我可以使用 php，但如果可能的話，我不想在本地 PC 上安裝任何服務器.稍后完成所有工作后，我將使用 php 包含
I know I can with php but if possible I want to do without installing any server on my local PC. later after all work done i will use 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 本身有一些特性可以讓你做到這一點.如果您可以在每個頁面上選擇頁眉/頁腳的容器，您可以插入任何您想要的通用內(nèi)容，甚至替換現(xiàn)有的內(nèi)容.
jQuery itself has some features that allow you to do that. If you can select header's/footer's container on each page, you can insert any common content you want, even replace the existing one.
你可以這樣做:
jQuery(function(){
jQuery('.header').html('SOME COMMON HEADER');
jQuery('.footer').html('SOME COMMON FOOTER');
});
在此處查看實際操作:http://jsfiddle.net/6sCfm/
或者，如果你堅持加載外部文件，你可以這樣做(使用 .load()):
Or, if you insist on loading external files, you can do this (using .load()):
jQuery(function(){
jQuery('.header').load('header.html');
jQuery('.footer').load('footer.html');
});
但請注意您作為參數(shù)提供的正確路徑，并確保 文件應該只有您需要的 HTML(沒有 <head>，<body> 標簽等 - 它會使 HTML 不正確).
but pay attention to correct paths you are giving as parameters and make sure, that files should have only the HTML you need (no <head>, <body> tags, etc. - it will make HTML incorrect).
如果您有整個頁面(使用 <head>、<header> 等)，則只能加載其中的一部分.最好為您要加載的部分(例如 header 和 footer)提供有意義的 ID，并在路徑中提供它們作為選擇器:
If you have whole pages (with <head>, <header> etc.), you can load only parts of them. Preferably give meaningful IDs to the parts you want to load (eg. header and footer) and supply them in the path, after space, as selector:
jQuery(function(){
jQuery('.header').load('header.html #header');
jQuery('.footer').load('footer.html #footer');
});
這應該足夠靈活:)
這篇關于是否有任何 jquery 插件可以在 HTML 頁面中保留常見的頁眉和頁腳?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！