跨網站的單個導航欄？

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鏈接。