Mar*_*olh 1 html jquery navbar bootstrap-4
我的网站使用 Bootstrap 4。
每个页面都包含相同的导航栏代码。当我更改导航栏时，我必须将代码复制到每个页面。
如何使用导航栏代码创建一个文件并在运行时将其包含在每个页面中，从而可以更新导航栏一次并使其在每个页面上显示相同的内容？
我知道如何在 php 中执行此操作，但我更喜欢使用 javascript。
我使用在其他网站上找到的示例制作了一个测试页面，但它不起作用，请参阅http://vidalingua.com/nav-test.html
在您的网站上，您在页面头部加载 jquery，然后在页面底部加载 jquery slim。在jquery slim中，不支持load()。不要加载 2 个版本的 jquery，而是在脚部加载完整版本的 jquery，然后将 jquery 代码放在后面。您的页面应如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<!--Navigation bar-->
<div id="nav-placeholder">
</div>
<!--end of Navigation bar-->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script>
$(function(){
$("#nav-placeholder").load("navbar.html");
});
</script>
</body>