网站上的单个导航栏? [英] Single navigation bar across website?

问题描述

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

I am currently building a web application for my employer, but I have some restrictions. It has to be in HTML, CSS, and Javascript for the front end, and I have to use a lot of different pages for this, each sharing the same navigation bar.

如果每个页面的导航相同，是否可以编写一次导航栏并在整个网站上使用?当我对链接或其他内容进行更改时，我感到很恼火，我必须逐一浏览并更改每个页面的相应导航链接.通常我会使用Angular之类的方法来实现此目的，但是我不确定如何使用这种更加准系统的方法来做到这一点.他们确实也没有使用任何JS库，因此，如果有一种方法可以使用原始" HTML CSS和JS进行处理，那么我很想了解它的工作原理.

If the navigation is the same for each page, is it possible to write the navigation bar once and use it across the entire website? I am just annoyed when I make a change to a link or something and I have to run through and change each pages respective navigation link. Normally I'd use something like Angular to achieve this, but I am not sure how to do it with this more barebones approach. They really don't use any JS libraries either so if there's a way to do it with "raw" HTML CSS and JS I'd love to learn how this works if it exists.

推荐答案

JQuery

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

JQuery

As JQuery is JS-based, you might be allowed to use it. You could then add a navigation div into each page's template:

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

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

and include a script on each page that executes the following JQuery-code:

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

纯JavaScript

或者，如果您不能使用JQuery，则可以使用普通的JavaScript，该JavaScript更轻量但不那么干净.

Pure JavaScript

Alternatively, if you cannot use JQuery whatsoever, you could use plain JavaScript, which is more lightweight but not as clean.

只要要包含导航，只需添加一个脚本即可:

Wherever you want to include the navigation, simply include a script:

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

根据document.write保持导航的位置:

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

这篇关于网站上的单个导航栏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！