如何将相同的 <div>（包含我的菜单）插入所有其他 html 页面？

Question

抱歉，如果我的问题很简单，我是初学者，不太确定如何解决这个问题。

我正在写一个博客，页面顶部有一个菜单栏。由于我不想更新每个 html 页面上的所有菜单，我希望从不同的 html 页面获取包含我的菜单的源。

我尝试过使用 iframe 或框架集，但遗憾的是它们会在底部切断我的下拉菜单。这意味着我要么必须删除它们，要么制作一个足够大的框架以容纳下拉菜单，但这会挤压页面的其余部分。此外，如果我单击任何菜单选项，将更新的页面将是框架本身 :|.

因此我想知道是否可以将一小部分预先存在的代码调用到 html 文件中？我也尝试过 JQuery 的 .load() 函数，但即使是简单的教程似乎也不适合我。

有谁知道将 div 导入 html 文件的方法，或者让我的 .load() 函数起作用的方法？我已经添加了我在下面使用的 .load() 教程。

包含 DIV

的页面

<html>
<head>    
</head>
<body>
<p>This is demo text.<p>
</body>
</html>

收到 DIV

的页面

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

   $('#content').load("new.html");

});
</script>
</head>
<body>

<div id="content"></div>

</body>
</html>

Answer 1

将菜单构建为 PHP 文件，然后使用包含函数将其拉入：

<?php include("/yourMenu.php"); ?>

就这么简单。更改 /yourMenu.php 将在每一页上更改它。希望对您有所帮助！

如何将相同的 <div>（包含我的菜单）插入所有其他 html 页面？

How do I insert the same <div> (which contains my menu) into all other html pages?

html

javascript

css

jquery

menu