使页眉和页脚文件包含在多个 html 页面中

javascript jquery html css

2022-08-30 01:46:37

我想创建包含在多个html页面上的常见页眉页和页脚页。

我想使用javascript。有没有办法只使用html和JavaScript来做到这一点？

我想在另一个 html 页面中加载页眉和页脚页。

答案 1

您可以使用jquery完成此操作。

将此代码放在index.html

<html>
<head>
<title></title>
<script
    src="https://code.jquery.com/jquery-3.3.1.js"
    integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous">
</script>
<script> 
$(function(){
  $("#header").load("header.html"); 
  $("#footer").load("footer.html"); 
});
</script> 
</head>
<body>
<div id="header"></div>
<!--Remaining section-->
<div id="footer"></div>
</body>
</html>

并将此代码放在和中，放在与header.htmlfooter.htmlindex.html

<a href="http://www.google.com">click here for google</a>

现在，当您访问时，您应该能够单击链接标签。index.html

答案 2

我使用服务器端包含添加常见部分作为页眉和页脚。不需要 HTML 和 JavaScript。相反，Web服务器在执行任何其他操作之前会自动添加包含的代码。

只需在要包含文件的位置添加以下行：

<!--#include file="include_head.html" -->