如何在多个页面上重复使用导航栏？答案

【问题标题】：How can I reuse a navigation bar on multiple pages?如何在多个页面上重复使用导航栏？
【发布时间】：2015-11-04 09:44:22
【问题描述】：

我刚刚完成了我的 home/index.html 页面。将导航栏保持在原位，并在用户单击我的所有页面时保持不变。我是否必须将导航代码复制并粘贴到每个页面的顶部？或者有没有其他方法可以看起来更干净？

HMTL 导航：

<nav>
    <div>
        <a href="/">
            <div id="logo"><img src="image.png" alt="Home"/></div>
            <div id="headtag"><img src="image.png" alt="Home"/></div>
            <div id="tagline"><img src="image.png" alt="Home"/></div>
        </a>
    </div>
    <div> 
        <a href="/" class="here">Home</a>
        <a href="/about.html" >About</a>      
        <a href="/services.html" >Services</a>          
        <a href="/pricing.html" >Pricing</a>    
        <a href="/contact.html" >Contact Us</a>
        <input id="srchbar" type="search" placeholder="Search">
    </div>
</nav>

【问题讨论】：

是的。请记住，当用户单击导航中的链接时，您的服务器/本地系统正在发送链接指示的文件以供下载和显示。当他们点击“关于”时，about.html 将被浏览器加载。所以它应该包含相同的导航。
如果您有服务器端语言，您可以将此代码放在模板中并包含在所有页面中，否则使用 Angular js 将其设为指令
我正在寻找同样的东西。遗憾的是，在 2017 年，我们无法使用基于客户端的网站来做到这一点。 Microsoft 一直拥有母版页（当前版本中的 _layouts）的概念。似乎客户端“容器页面”并不荒谬。

标签： html navbar

【解决方案1】：

这对我有帮助。我的导航栏在 body 标签中。导航栏的完整代码在nav.html 文件中（没有任何html 或body 标签，只有导航栏的代码）。在目标页面中，它位于head 标签中：

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

然后在body标签中，用一个唯一的id和一个javascript块制作一个容器，将nav.html加载到容器中，如下：

<!--Navigation bar-->
<div id="nav-placeholder">

</div>

<script>
$(function(){
  $("#nav-placeholder").load("nav.html");
});
</script>
<!--end of Navigation bar-->

【讨论】：

你好。我对 jquery/javascript 一无所知，但我只是想试试这个。我试着完全按照你说的去做。我的导航菜单在一页上没有任何其他标签，并且我将其余代码包含在我的索引页面（简单索引页面）的头部/正文中。但是，它不会在所有页面上加载我的导航栏。知道我可能做错什么吗？谢谢！
@Lay 它是否显示？我必须告诉你，在开发（在本地加载页面）时，这段代码通常不起作用。您是否将此代码放在服务器上？
有点题外话，请原谅我的无知：如果您像在答案中那样对 jQuery 版本进行硬编码：<script src="https://code.jquery.com/jquery-1.10.2.js"></script>，那么当版本 1.10.3 或 1.11.0 时您的页面会发生什么出来？
@LaryxDecidua 然后它继续工作。始终加载最新版本可能会破坏页面。考虑版本之间的重大更改。因此，建议在切换到不同版本时进行测试。
我在本地电脑的 index.html 中使用了上面的代码，在 chrome 中进行了测试，它给我下面的错误，并且 nav.html 无法加载。jquery.min.js:4 Access to XMLHttpRequest at 'nav.html' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.任何想法？

【解决方案2】：

我知道这是一个很老的问题，但是当你有 JavaScript 可用时，你可以使用 jQuery 及其 AJAX 方法。

首先，创建一个包含所有导航栏 HTML 内容的页面。

接下来，使用 jQuery 的$.get 方法来获取页面的内容。例如，假设您已将所有导航栏的 HTML 放入一个名为 navigation.html 的文件中，并在您的 index.html 中添加了一个占位符标记（如 <div id="nav-placeholder">），那么您将使用以下代码：

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$.get("navigation.html", function(data){
    $("#nav-placeholder").replaceWith(data);
});
</script>

【讨论】：

【解决方案3】：

使用纯javascript：

将您的导航栏 html 代码保存在 nav.html 文件中。

使用以下代码创建 nav.js 文件：

fetch('nav.html')
.then(res => res.text())
.then(text => {
    let oldelem = document.querySelector("script#replace_with_navbar");
    let newelem = document.createElement("div");
    newelem.innerHTML = text;
    oldelem.parentNode.replaceChild(newelem,oldelem);
})

在你想要导航栏的其他 html 文件中添加这一行：

<script id="replace_with_navbar" src="nav.js"></script>

这会将脚本本身替换为 nav.html 的内容

【讨论】：

+200 为此。谢啦。你救了我。这是一个不错的 hack。
适用于静态项目，如果有切换类或下拉菜单它不起作用。有什么解决方案可以让它与下拉菜单一起工作，切换？
我爱你@Mendi Barel。这就是我一直在寻找的。它将我的 JavaScript 与我的 HTML 分开，并与引导程序一起使用。它甚至解决了我的下拉菜单不起作用的问题。谢谢！

【解决方案4】：

您可以使用php制作多页网站。

创建一个 header.php，您应该在其中放置菜单和社交媒体等的所有 html 代码
使用以下代码在 index.php 中插入 header.php

<? php include 'header.php'; ?>

（以上代码将转储之前的所有html代码）您的网站正文内容。

同样，您可以轻松创建页脚和其他元素。 PHP 在其扩展中内置支持 html 代码。所以，最好学习一下这个简单的解决方法。

【讨论】：

所以你们都说我应该将所有这些都转换为 PHP，而不是我的网站的多个 HTML 页面吗？这是我的第一个站点，而且我知道 html，这就是我使用它的原因，但如果它应该是 PHP，那么它应该是 PHP.... 那么它应该是哪个？
这是非常基础的 php，您可以轻松学习。当您将自己的一方转换为使用服务器端语言时，您将不会面临噩梦。我推荐这个。但是如果你打算只使用 html，考虑 .shtml 来解决小问题，我仍然觉得它对于成长中的网站来说很笨重。
好的。现在这个页面是html。我如何将其转换为 php？是一些条目还是我必须重做所有标签？如果是这样，如何....所以我不会搞砸哈
将扩展名更改为 .php 就完成了。使用以下代码大括号输入 php 代码<?php include 'header.php'; ?> 去 php.net 或 w3schools 进行基础学习。

【解决方案5】：

一种非常古老但足够简单的技术是使用"Server-Side Includes"，将HTML 页面包含到具有.shtml 扩展名的顶级页面中。例如，这将是您的 index.shtml 文件：

<html>
<head>...</head>
<body>
<!-- repeated header: note that the #include is in a HTML comment -->
<!--#include file="header.html" -->
<!-- unique content here... -->
</body>
</html>

是的，它很蹩脚，但它有效。请记住在您的 HTTP 服务器配置中启用 SSI 支持 (this is how to do it for Apache)。

【讨论】：

【解决方案6】：

Brando ZWZ 为处理这种情况提供了一些很好的答案。

Re: 多个页面上的相同导航栏 2018 年 8 月 21 日上午 10:13|链接

据我所知，有多种解决方案。

例如：

导航栏的完整代码在nav.html文件中（没有任何html或body标签，只有导航栏的代码）。

然后我们可以直接从jquery中加载它，而不用写很多代码。

像这样：

    <!--Navigation bar-->
    <div id="nav-placeholder">

    </div>

    <script>
    $(function(){
      $("#nav-placeholder").load("nav.html");
    });
    </script>
    <!--end of Navigation bar-->

解决方案2：

您可以使用 JavaScript 代码生成整个导航栏。

像这样：

Javascript 代码：

$(function () {
    var bar = '';
    bar += '<nav class="navbar navbar-default" role="navigation">';
    bar += '<div class="container-fluid">';
    bar += '<div>';
    bar += '<ul class="nav navbar-nav">';
    bar += '<li id="home"><a href="home.html">Home</a></li>';
    bar += '<li id="index"><a href="index.html">Index</a></li>';
    bar += '<li id="about"><a href="about.html">About</a></li>';
    bar += '</ul>';
    bar += '</div>';
    bar += '</div>';
    bar += '</nav>';

    $("#main-bar").html(bar);

    var id = getValueByName("id");
    $("#" + id).addClass("active");
});

function getValueByName(name) {
    var url = document.getElementById('nav-bar').getAttribute('src');
    var param = new Array();
    if (url.indexOf("?") != -1) {
        var source = url.split("?")[1];
        items = source.split("&");
        for (var i = 0; i < items.length; i++) {
            var item = items[i];
            var parameters = item.split("=");
            if (parameters[0] == "id") {
                return parameters[1];
            }
        }
    }
}

HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
    <div id="main-bar"></div>
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <%--add this line to generate the nav bar--%>
    <script src="../assets/js/nav-bar.js?id=index" id="nav-bar"></script>
</body>
</html>

https://forums.asp.net/t/2145711.aspx?Same+navbar+on+multiple+pages

【讨论】：