跨网站的单个导航栏？

Question

我目前正在为我的雇主构建一个 Web 应用程序，但我有一些限制。 前端必须使用 HTML、CSS 和 Javascript，为此我必须使用许多不同的页面，每个页面共享相同的导航栏。

如果每个页面的导航都相同，是否可以编写一次导航栏并在整个网站上使用它？ 当我更改链接或其他内容时，我很生气，我必须遍历并更改每个页面各自的导航链接。 通常我会使用 Angular 之类的东西来实现这一点，但我不确定如何使用这种更准系统的方法来做到这一点。 他们也真的不使用任何 JS 库，所以如果有办法用“原始”HTML CSS 和 JS 来做到这一点，我很想了解它是如何工作的（如果它存在的话）。

Answer 1

查询

由于 JQuery 是基于 JS 的，因此您可能会被允许使用它。 然后，您可以将导航 div 添加到每个页面的模板中：

<div id="navigation"></div>

并在每个页面上包含一个执行以下 JQuery 代码的脚本：

$(function() {
    $("#navigation").load("navigation.html");
});

纯 JavaScript

或者，如果您不能使用 JQuery，您可以使用纯 JavaScript，它更轻量级但不那么干净。

无论您想在何处包含导航，只需包含一个脚本：

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

其中包含基于document.write的导航：

document.write('<div>\
    ... your navigation content ...\
    </div>\
');

Answer 2

最简单的方法就是在 JS 文件中编写代码，然后将该代码包含在您的页面中。 您可以对其进行硬编码或使其更智能，但这里有一个基本的演示。

 var html = '<ul>\\ <li>\\ <a href="#">link</a>\\ </li>\\ <li>\\ <a href="#">link</a>\\ </li>\\ <li>\\ <a href="#">link</a>\\ </li>\\ </ul>'; document.getElementById('nav').innerHTML = html;

 <nav id="nav"></nav>

Answer 3

您可以使用 w3 库将html文件包含在 html 中。

<div w3-include-html="navbar.html"></div>

<script>
    w3.includeHTML();
</script>

查看此 w3schools链接。