跨网站的单个导航栏？

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>\
');