Question

我想定义一个在我的页面上插入时扩展为HTML的函数/宏。我想将它用于我的页脚和我的菜单，这些页面在每个页面上都是相同的，而不必在每个页面上重复它。因为当某些内容发生变化时，所有页面都必须手动更新...

这是我的个人网站（10-15页）所以我通过使用纯HTML / CSS获得乐趣，没有服务器端编码。

作为一个例子，我希望我的页脚HTML显示在每个页面上：

<footer id="footer">
    <p>(c) Mattias Lindberg, 2011-2014</p>
</footer>

我想做的就是添加类似下面的内容：

<footer id="footer" />

然后应该扩展到上面的HTML。

如何使用HTML / CSS / jQuery或其他客户端技术？

Answer 1

由于您尚未在代码列表中指定PHP，因此这里是Jquery代码。

HTML页面：footer.html。

<footer>
<p>(c) Mattias Lindberg, 2011-2014</p>
</footer>

将此Jquery脚本添加到您希望footer.html输入的所有网页。

$(document).ready(function(e) {
    $('#footer').load('pathtofooter.html');
});

在HTML标记内的任意位置添加此body代码。

<div id='footer'></div>

参考：jquery.load()

有任何问题吗？

Answer 2

您可以在脚本中对其进行硬编码，并在加载页面时调用它：

$(document).ready(function() {

    var headerHtml = 'Whatever';
    var footerHtml = '<footer id="footer">\
                       <p>(c) Mattias Lindberg, 2011-2014</p>\
                      </footer>';

    $('#header-anchor').after(headerHtml);
    $('#footer-anchor').after(footerHtml);
});

只需使用要放置页眉和页脚的锚点。

Answer 3

将其写入footer.html，通过ajax将其拉出并将其附加到正文中。

函数/宏在所有页面上添加相同的菜单/页脚

3 个答案: