如何在多个页面上重复使用导航栏？
Posted
技术标签:
【中文标题】如何在多个页面上重复使用导航栏？【英文标题】：How can I reuse a navigation bar on multiple pages? 【发布时间】：2015-11-04 09:44:22 【问题描述】：我刚刚完成了我的 home/index.html 页面。将导航栏保持在原位，并在用户单击我的所有页面时保持不变。我是否必须将导航代码复制并粘贴到每个页面的顶部？或者有没有其他方法可以看起来更干净？
HMTL 导航：
<nav>
<div>
<a href="/">
<div id="logo"><img src="image.png" /></div>
<div id="headtag"><img src="image.png" /></div>
<div id="tagline"><img src="image.png" /></div>
</a>
</div>
<div>
<a href="/" class="here">Home</a>
<a href="/about.html" >About</a>
<a href="/services.html" >Services</a>
<a href="/pricing.html" >Pricing</a>
<a href="/contact.html" >Contact Us</a>
<input id="srchbar" type="search" placeholder="Search">
</div>
</nav>
【问题讨论】：
是的。请记住，当用户单击导航中的链接时，您的服务器/本地系统正在发送链接指示的文件以供下载和显示。当他们点击“关于”时，about.html 将被浏览器加载。所以它应该包含相同的导航。
如果您有服务器端语言，您可以将此代码放在模板中并包含在所有页面中，否则使用 Angular js 将其设为指令
我正在寻找同样的东西。遗憾的是，在 2017 年，我们无法使用基于客户端的网站来做到这一点。 Microsoft 一直拥有母版页（当前版本中的 _layouts）的概念。似乎客户端“容器页面”并不荒谬。
【参考方案1】：
这对我有帮助。我的导航栏在 body 标签中。导航栏的完整代码在nav.html 文件中（没有任何html 或body 标签，只有导航栏的代码）。在目标页面中，它位于head 标签中：
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
然后在body标签中，用一个唯一的id和一个javascript块制作一个容器，将nav.html加载到容器中，如下：
<!--Navigation bar-->
<div id="nav-placeholder">
</div>
<script>
$(function()
$("#nav-placeholder").load("nav.html");
);
</script>
<!--end of Navigation bar-->
【讨论】：
你好。我对 jquery/javascript 一无所知，但我只是想试试这个。我试着完全按照你说的去做。我的导航菜单在一页上没有任何其他标签，并且我将其余代码包含在我的索引页面（简单索引页面）的头部/正文中。但是，它不会在所有页面上加载我的导航栏。知道我可能做错什么吗？谢谢！ @Lay 它是否显示？我必须告诉你，在开发（在本地加载页面）时，这段代码通常不起作用。您是否将此代码放在服务器上？ 有点题外话，请原谅我的无知：如果您像在答案中那样对 jQuery 版本进行硬编码：<script src="https://code.jquery.com/jquery-1.10.2.js"></script>，那么当版本 1.10.3 或 1.11.0 时您的页面会发生什么出来？
@LaryxDecidua 然后它继续工作。始终加载最新版本可能会破坏页面。考虑版本之间的重大更改。因此，建议在切换到不同版本时进行测试。
我在本地电脑的 index.html 中使用了上面的代码，在 chrome 中进行了测试，它给我下面的错误，并且 nav.html 无法加载。jquery.min.js:4 Access to XMLHttpRequest at 'nav.html' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.任何想法？【参考方案2】：
我知道这是一个很老的问题，但是当你有 JavaScript 可用时，你可以使用 jQuery 及其 AJAX 方法。
首先，创建一个包含所有导航栏 HTML 内容的页面。
接下来，使用 jQuery 的$.get 方法来获取页面的内容。例如，假设您已将所有导航栏的 HTML 放入一个名为 navigation.html 的文件中，并在您的 index.html 中添加了一个占位符标记（如 <div id="nav-placeholder">），那么您将使用以下代码：
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$.get("navigation.html", function(data)
$("#nav-placeholder").replaceWith(data);
);
</script>
【讨论】：
【参考方案3】：使用纯javascript：
将您的导航栏 html 代码保存在 nav.html 文件中。
使用以下代码创建 nav.js 文件：
fetch('nav.html')
.then(res => res.text())
.then(text =>
let oldelem = document.querySelector("script#replace_with_navbar");
let newelem = document.createElement("div");
newelem.innerHTML = text;
oldelem.parentNode.replaceChild(newelem,oldelem);
)
在你想要导航栏的其他 html 文件中添加这一行：
<script id="replace_with_navbar" src="nav.js"></script>
这会将脚本本身替换为 nav.html 的内容
【讨论】：
+200 为此。谢啦。你救了我。这是一个不错的 hack。 适用于静态项目，如果有切换类或下拉菜单它不起作用。有什么解决方案可以让它与下拉菜单一起工作，切换？ 我爱你@Mendi Barel。这就是我一直在寻找的。它将我的 JavaScript 与我的 HTML 分开，并与引导程序一起使用。它甚至解决了我的下拉菜单不起作用的问题。谢谢！【参考方案4】：您可以使用php制作多页网站。
创建一个 header.php，您应该在其中放置菜单和社交媒体等的所有 html 代码 使用以下代码在 index.php 中插入 header.php<?
php include 'header.php';
?>
（以上代码将转储之前的所有html代码）您的网站正文内容。
同样，您可以轻松创建页脚和其他元素。 PHP 在其扩展中内置支持 html 代码。所以，最好学习一下这个简单的解决方法。【讨论】：
所以你们都说我应该将所有这些都转换为 PHP，而不是我的网站的多个 HTML 页面吗？这是我的第一个站点，而且我知道 html，这就是我使用它的原因，但如果它应该是 PHP，那么它应该是 PHP.... 那么它应该是哪个？ 这是非常基础的 php，您可以轻松学习。当您将自己的一方转换为使用服务器端语言时，您将不会面临噩梦。我推荐这个。但是如果你打算只使用 html，考虑 .shtml 来解决小问题，我仍然觉得它对于成长中的网站来说很笨重。 好的。现在这个页面是html。我如何将其转换为 php？是一些条目还是我必须重做所有标签？如果是这样，如何....所以我不会搞砸哈 将扩展名更改为 .php 就完成了。使用以下代码大括号输入 php 代码<?php include 'header.php'; ?> 去 php.net 或 w3schools 进行基础学习。【参考方案5】：
一种非常古老但足够简单的技术是使用"Server-Side Includes"，将HTML 页面包含到具有.shtml 扩展名的***页面中。例如，这将是您的 index.shtml 文件：
<html>
<head>...</head>
<body>
<!-- repeated header: note that the #include is in a HTML comment -->
<!--#include file="header.html" -->
<!-- unique content here... -->
</body>
</html>
是的，它很蹩脚，但它有效。请记住在您的 HTTP 服务器配置中启用 SSI 支持 (this is how to do it for Apache)。
【讨论】：
【参考方案6】：Brando ZWZ 为处理这种情况提供了一些很好的答案。
Re: 多个页面上的相同导航栏 2018 年 8 月 21 日上午 10:13|链接
据我所知，有多种解决方案。
例如：
导航栏的完整代码在nav.html文件中（没有任何html或body标签，只有导航栏的代码）。
然后我们可以直接从jquery中加载它，而不用写很多代码。
像这样：
<!--Navigation bar-->
<div id="nav-placeholder">
</div>
<script>
$(function()
$("#nav-placeholder").load("nav.html");
);
</script>
<!--end of Navigation bar-->
解决方案2：
您可以使用 JavaScript 代码生成整个导航栏。
像这样：
Javascript 代码：
$(function ()
var bar = '';
bar += '<nav class="navbar navbar-default" role="navigation">';
bar += '<div class="container-fluid">';
bar += '<div>';
bar += '<ul class="nav navbar-nav">';
bar += '<li id="home"><a href="home.html">Home</a></li>';
bar += '<li id="index"><a href="index.html">Index</a></li>';
bar += '<li id="about"><a href="about.html">About</a></li>';
bar += '</ul>';
bar += '</div>';
bar += '</div>';
bar += '</nav>';
$("#main-bar").html(bar);
var id = getValueByName("id");
$("#" + id).addClass("active");
);
function getValueByName(name)
var url = document.getElementById('nav-bar').getAttribute('src');
var param = new Array();
if (url.indexOf("?") != -1)
var source = url.split("?")[1];
items = source.split("&");
for (var i = 0; i < items.length; i++)
var item = items[i];
var parameters = item.split("=");
if (parameters[0] == "id")
return parameters[1];
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="main-bar"></div>
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<%--add this line to generate the nav bar--%>
<script src="../assets/js/nav-bar.js?id=index" id="nav-bar"></script>
</body>
</html>
https://forums.asp.net/t/2145711.aspx?Same+navbar+on+multiple+pages
【讨论】：
以上是关于如何在多个页面上重复使用导航栏？的主要内容，如果未能解决你的问题，请参考以下文章