如何使我的导航栏在我的 html 中相同？答案

【问题标题】：How can I make my navi-bar the same across my html?如何使我的导航栏在我的 html 中相同？
【发布时间】：2013-03-04 22:28:21
【问题描述】：

对于每个新页面，我都必须更新导航面板。这意味着我从一个页面到另一个页面复制和粘贴我的导航栏。我添加的页面越多，它就越难。现在我有不一致的导航栏。所以我正在寻找一种方法来制作一个仅包含导航栏的 html 文件，然后将其嵌入到我的代码中，就像我对 CSS 和 JavaScript 所做的那样。这样，如果我编辑一个文件，所有其他页面都会更新。如果我使用 iframe 标签，会有很多问题，但我知道没有其他标签可以满足我的需要。所以我该怎么做？我做了一些研究，但我只能找到 iframe 标记。我该怎么办？

【问题讨论】：

传统的方式是创建单独的页眉和页脚文件，并使用PHP将include这些文件放入您的页面。除非您想使用 iframe，否则我不确定是否有办法仅使用 HTML 来实现这一点。顺便说一句，我不建议使用 iframe。 php.net/manual/en/function.include.php
但是使用php的方式，页面本身不是必须是php的吗？或者我可以放一点像javascript这样的sn-p代码吗？
不，页面不必使用 PHP。这些页面可以包含 HTML 代码，并且它们仍然可以使用 PHP，使用 include 或 require 函数“嵌入”。
好的，那么有没有某种标签，比如js的
查看我的答案以获取一些示例代码和更冗长的解释。

标签： html

【解决方案1】：

事实上，如果你像我一样只做前端的事情，使用 jQuery 的 load() 就绰绰有余了。就像 Skitty 和 fskirschbaum 所说的那样。

但我想补充几点，
1. 根据@Skitty 的评论，在服务器端加载你的 navbar.html 很重要，就像简单地将它托管在你的 github.io 网站上并通过它的 URL 来引用它，比如

 $(document).ready(function() {
   $('#nav-container').load('https://berlinali.github.io/test%20header%20template/header.html #nav');}

2。如果您有 css 文件，只需将其放在 html 文件的

部分中的中。

如果您需要参考，我会将我的代码推送到 github。希望能帮助到你！ https://github.com/BerlinaLI/berlinali.github.io/tree/master/test%20header%20template

【讨论】：

【解决方案2】：

只需使用 jQuery .load()。这是非常容易使用。这是一个例子

navbar.html

<div>This is the navigation bar</div>

index.html

<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
</head>
<body>

<!--HEADER-->
<div id="nav-container"></div>
<!--HEADER-->

<p>This is the homepage.</p>
<script type="text/javascript">
$(document).ready(function() {
$('#nav-container').load('header.html');
});
</script>
</body>
</html>

about.html

<!DOCTYPE html>
<html>
<head>
<title>About Page</title>
</head>
<body>

<!--HEADER-->
<div id="nav-container"></div>
<!--HEADER-->

<p>This is the about page.</p>
<script type="text/javascript">
$(document).ready(function() {
$('#nav-container').load('header.html');
});
</script>
</body>
</html>

【讨论】：

【解决方案3】：

如果你的页面是严格的 HTML+JavaScript，你可以使用 HTML DOM 的 innerHTML 属性。这是一个例子：

index.html

 <body>
  <nav id="navMenu"></nav>
  <div> rest of web page body here </div>
  <script src="script.js"></script>
 </body>

about.html

 <body>
  <nav id="navMenu"></nav>
  <div> rest of web page body here </div>
  <script src="script.js"></script>
 </body>

script.js

 document.getElementById("navMenu").innerHTML =
 '<ul>'+
  '<li><a href="index.html">Home</a></li>'+
  '<li><a href="services.html">Services</a></li>'+
  '<li><a href="about.html">About</a></li>'+
 '</ul>';

这里重要的一行是nav标签，你需要做的就是在本例about.html的其他页面中添加这一行。

我也推荐 PHP 或类似的东西来完成你所需要的！

【讨论】：

我们可以将其作为 HTML 导入而不是通过 JavaScript 编写吗？

【解决方案4】：

我自己想通了，你可以使用 JavaScript 文件并使用 document.write 然后把它放在你想要的地方：

<script type="text/javascript" src="/js/sidebar.js"/>

这是我的 js 文件：

document.write("<div id='sidebartop'>");
document.write("<p>Navigation</p>");
document.write("</div>");

如果您想在行内同时使用双引号和单引号，请注意这一点，我认为符号必须用双引号引起来。这是我的完整代码：

     ----/js/sidebar.js----
document.write("<div id='sidebartop'>");
document.write("<p>Navigation</p>");
document.write("</div>");
document.write("<div id='sidebar'>");
if (page==1) { var p=" style='text-decoration: underline;'" } else { var p=" style='text-decoration: normal;'" }
if (page==2) { var pp=" style='text-decoration: underline;'" } else { var pp=" style='text-decoration: normal;'" }
if (page==3) { var ppp=" style='text-decoration: underline;'" } else { var ppp=" style='text-decoration: normal;'" }
if (page==4) { var pppp=" style='text-decoration: underline;'" } else { var pppp=" style='text-decoration: normal;'" }
if (page==5) { var ppppp=" style='text-decoration: underline;'" } else { var ppppp=" style='text-decoration: normal;'" }
document.write("<p><"+'a href="http://brandonc.handcraft.com/"'+p+">Home</a></p>");
document.write("<p><"+'a href="http://brandonc.handcraft.com/about"'+pp+">About The Author</a></p>");
document.write("<p><"+'a href="http://brandonc.handcraft.com/sevenmages"'+ppp+">The Seven Mages</a></p>");
document.write("<p><"+'a href="http://brandonc.handcraft.com/comment"'+pppp+">Leave A Comment</a></p>");
document.write("<p><"+'a href="http://brandonc.handcraft.com/calender"'+ppppp+">Calender</a></p>");
document.write("</div>");

     ----In place where you want code to go----
<script>var page=5</script>
<script type="text/javascript" src="/js/sidebar.js"/>

可能不是最有效的，我强烈建议在其他答案中使用 PHP，但这对我有用，并且不需要在每个 url 后添加 .php。

【讨论】：

【解决方案5】：

在这种情况下，PHP 可能是最好的方法，但由于听起来您已经在纯 HTML 和 JavaScript 中设置了所有内容，因此您可以考虑使用 jQuery 将外部文件加载到 DOM 中。

jquery.load('header.html')

这当然有其自身的一系列问题，但您可以通过一个简单的 .js 框架有效地控制一切，而无需使用 php 包含且不需要 iFrame。

您仍然可能希望在没有打开 JavaScript 的情况下解决浏览器的后备问题，所以我只在不了解所有细节的情况下建议这样做，而且我仍然建议 php 仍然是一个更好的解决方案，因为您允许服务器来完成繁重的工作。

【讨论】：

你调用的是什么版本的jQuery？您可以在此处查看有关启动和运行的文档api.jquery.com/load这里有一个工作示例：stackoverflow.com/questions/9152446/…
什么意思是什么版本？我只是使用脚本标签，idk什么版本。
jQuery 是一个库，它利用 JavaScript 为您的网页做一些惊人的事情，但是它不是原生 JavaScript。您应该查看 www.jquery.com 以了解有关在您的网站上包含此库以及如何使用它的更多信息。

【解决方案6】：

如果你想用PHP来实现，这个，你可以做类似下面的代码。您将拥有 2 个“模板”文件，然后是您需要的许多“内容”文件。

header.php 将在标题中包含内容（徽标、导航菜单等）
footer.php 将在页脚包含内容（底部导航、版权、免责声明等）
content.php 将包含您希望显示的实际内容。您可以拥有无限数量的“内容”页面。

请注意，虽然这些文件有 .php 扩展名，但 HTML 代码仍然可以正常工作。所以你可以为每个content.php做这样的事情：

content.php

<?php include "header.php"; ?>

<div class="content">
Your page content will go here
</div>

<?php include "footer.php"; ?>

header.php

<html>
<body>
<div class="header">
Header content such as nav bar here
</div>

footer.php

<div class="footer">
Footer content such as copyright here
</div>
</body>
</html>

这样，您只需更改header.php和footer.php的内容一次，更改将反映在您包含文件的所有页面中。

如果您有任何其他问题或想再次解释某些内容，请随时发表评论。

【讨论】：

我已经尝试过了，但我遇到了一个问题。一个问题可能是我正在使用的特定编辑器/托管服务是......坦率地说很奇怪。一方面，如果我想做一个 *.js 文件或 *.css 文件之类的东西，我必须做这样的事情：<page url="/somefile.js" type="js"> 奇怪的是，当我输入 <page url="/home.php" type="php"> 并将 <?php include("header.html"); ?> 放入代码中时（使用相应的页面）什么也不做。
另外，如果问题确实出在我的特定托管服务上，那么如果您能推荐一个更好的免费托管服务，我会更乐意更换。

【解决方案7】：

我会强烈推荐使用 PHP：

<?php include "header.html"; ?>

但是，如果这不是一个选项，您可以使用Server Side Includes：

同一目录下的文件：

<!--#include file="header.html"-->

文件在不同的目录：

<!--#include virtual="/header.html"-->

您需要一个 Linux/Apache（不是 Windows）服务器才能使其工作。您还需要使用.shtml 文件扩展名。

或者，如果您想保留.html 扩展名，您可以让Apache“认为”所有.html 文件实际上都是.php：

在您网站的根目录创建一个 .htaccess 文件并添加以下行：

AddType application/x-httpd-php .html .htm

如果您将 PHP 作为 CGI 运行（可能不是这种情况），您应该改为：

AddHandler application/x-httpd-php .html .htm

（取自this answer）

【讨论】：

我已经尝试过了，但我遇到了一个问题。一个问题可能是我正在使用的特定编辑器/托管服务是......坦率地说，这很奇怪。一方面，如果我想制作像 *.js 文件或 *.css 文件这样的东西，我必须做这样的事情：奇怪的是，当我输入时并把在代码中（带有相应的页面）是什么都不做。顺便说一句，我将对所有答案发表评论，希望你们中的一个人有答案。
在服务器端包含导航栏有一些缺点。在大多数情况下，它会在没有充分理由的情况下增加页面文件的大小，尤其是当您的导航栏大部分时间是静态的时。我宁愿建议通过 javascript eg.jquery.load('navbar.html') 将导航栏附加到网页。在这种情况下，浏览器将为大多数用户缓存 navbar.html，这可以为您的服务器节省大量流量。

【解决方案8】：

如果您的页面是严格的 HTML，那么您只需进行复制和粘贴。如果您使用的是 PHP，那会好很多，然后您可以简单地执行 include 或 require 但是现在的情况是，您需要做的就是为您的导航提供干净的 HTML 编码。缩进你的代码，这样你就可以更容易地在所有页面上复制和分页。

如果您可以使用简单的 PHP 代码，请阅读以下内容：http://www.w3schools.com/php/php_includes.asp

【讨论】：

我尝试过使用 php，但遇到了一个问题。一个问题可能是我正在使用的特定编辑器/托管服务......坦率地说，这很奇怪。一方面，如果我想制作像 *.js 文件或 *.css 文件这样的东西，我必须做这样的事情：奇怪的是，当我输入时并把在代码中（带有相应的页面）是什么都不做。顺便说一句，我将对所有答案发表评论，希望你们中的一个人有答案。

【解决方案9】：

您可以使用服务器端脚本语言，如 php 或 ruby。或者你可以创建一些说 menu.json 文件并在 javascript 中创建菜单。

您应该使用服务器端设置服务器，或者您可以使用XAMPP 进行快速设置。
使用所有菜单链接创建 header.html
使用<?php include 'header.html'; ?> 行包含菜单文件（您使用它的所有文件都应具有.php 扩展名，或者您可以编辑php 配置文件以获取.html 扩展名）

【讨论】：

是的，这可行，但我喜欢我当前的菜单，但我不确定如何从 javascript 获得相同的结果或类似的结果。不过我相信这是可能的。
我尝试过使用 php，但遇到了一个问题。一个问题可能是我正在使用的特定编辑器/托管服务......坦率地说，这很奇怪。一方面，如果我想制作像 *.js 文件或 *.css 文件这样的东西，我必须做这样的事情：奇怪的是，当我输入时并把在代码中（带有相应的页面）是什么都不做。顺便说一句，我将对所有答案发表评论，希望你们中的一个人有答案。
什么是标签？创建一个名为 info.php 的文件并在其中放入以下代码： phpinfo() ?> 有什么作用吗？
我无法制作文件。我认为每个人都使用标签。在这个编辑器中比更重要，当然我还是用html，但是刚开始的时候没有。