整个网站只有一个导航栏？

Question

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

如果每个页面的导航都是相同的，那么是否可以编写一次导航栏并在整个网站上使用它？当我更改链接或其他内容时，我只需运行并更改每个页面的相应导航链接，这让我感到很烦恼。通常，我会使用类似Angular的东西来实现这一点，但我不确定如何使用这种更基础的方法。他们真的不使用任何JS库，所以如果有一种使用“原始”HTML CSS和JS的方法，我很乐意学习它是否存在。

- Jarred Parr

---

你可以使用“HTML”框架吗？你可以使用 Polymer，它允许你创建新的 HTML 标签。https://www.polymer-project.org/ 或者你可以创建一个包含导航的独立网站，并将其作为 iframe 包含（无需框架）。 - Pascal L.

请查看以下链接：https://dev59.com/2lwZ5IYBdhLWcg3wBcMJ，以加载您需要的代码到您的页面。 - aorfevre

老派的做法：http://html.com/frames/（请不要使用此方法，仅供教育目的发布） - phil

如何在没有HTML、CSS或JavaScript的情况下完成这个任务？使用它们会有什么“限制”吗？ - Rob

可能是HTML/CSS多页面导航栏的重复问题。 - Gaurang Tandon

Answer 1

JQuery

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

- N. M.

---

如果我使用Bootstrap来构建导航，这个能行吗？ - Jarred Parr

当然可以！您可以在页面的HTML文件中引用Bootstrap样式表，而jQuery/JavaScript基本上只会将您加载/编写的内容附加到当前文件中 - 以这种方式编写的内容知道包含的样式表/脚本。 - N. M.

那么 jQuery 可以让我使用。对于这个示例，在哪里写HTML才能被引用呢？ - Jarred Parr

在我的例子中，navigation.html 只包含简单的导航内容，没有别的。然后，在你想放置导航的页面处使用我提供的 JQuery 调用即可。 - N. M.

Answer 2

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

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

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

请查看这个w3schools的链接。

- Edison Biba

Answer 3

最简单的方法就是将代码写在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>

- Michael Coker

---

如果我使用Bootstrap，这会起作用吗？我的意思是，如果我在JS类中编写HTML模板，Bootstrap仍然会被识别吗？ - Jarred Parr

是的，只需使用普通HTML中使用的任何类。 - Michael Coker

这太丑了 - Selwyn