首页 文章

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

提问于
浏览 次
-1

我在我的网站上使用Bootstrap 4 .

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

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

我知道如何在PHP中执行此操作但我更喜欢使用javascript .

我使用在其他网站上找到的示例制作了一个测试页，但它不起作用，请参阅http://vidalingua.com/nav-test.html

jquery html bootstrap-4 navbar

3 回答

  • 0

    在您的站点上，您将头部加载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>
    回复于
  • 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>
    回复于
  • -1

    制作一个导航栏并在完成后将其复制到其他页面 .

    回复于

相关问题