整个网站的单一导航栏？

Question

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

如果每个页面的导航相同，是否可以编写一次导航栏并在整个网站上使用它？当我对链接或某些内容进行更改时，我感到很恼火，我必须通过并更改每个页面各自的导航链接。通常我会使用像Angular这样的东西来实现这一目标，但我不知道如何使用这种更准确的方法来实现它。他们真的不使用任何JS库，所以如果有一种方法可以使用“原始”HTML CSS和JS，我很乐意了解它是如何工作的。

Answer 1

JQuery的

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

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

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

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

纯JavaScript

或者，如果你不能使用JQuery，你可以使用纯JavaScript，它更轻巧但不干净。

只要您想要包含导航，只需添加一个脚本：

document.write

根据document.write('<div>\ ... your navigation content ...\ </div>\ ); 保存您的导航：

for (let fk_dataset of ( this.props.fk_data || [] ) ) {
    [...]
}

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 link。