Question

我正在为我的网站使用Bootstrap 4。

每个页面都包含相同的导航栏代码。更改导航栏时，必须将代码复制到每个页面。

如何使用导航栏代码创建一个文件，并在运行时将其包含在每个页面中，从而可以一次更新导航栏，并使导航栏在每个页面上显示相同的内容？

我知道如何在php中执行此操作，但我更喜欢使用javascript。

我使用在其他网站上找到的示例制作了一个测试页，但是它无法正常工作，请参见http://vidalingua.com/nav-test.html

Answer 1

在您的网站上，您先将jquery加载到页面顶部，然后将jlim加载到页面的底部。在jQuery中，不支持苗条的load（）。无需加载2个版本的just lust，而是将完整版本的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>

Answer 2

我找到了可行的解决方案。

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
    $(function(){
        var filename = "https://www.vidalingua.com/navbar.html"
        $("#includedContent").load(filename);
    });
</script>
</head>
<body>
<div id="includedContent"></div>
<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>
</body>

如何在网站的每个页面上重复使用html导航栏？

2 个答案: