如何使我的导航栏在html中保持一致？
随着每一个新的页面，我必须更新导航面板。这意味着我要从一页到另一页复制和粘贴我的导航栏。我添加的页面越多，它就变得越难。现在我有了一致的导航栏。所以我要寻找的是一种方法，制作一个只包含导航栏的html文件，然后将其嵌入到我的代码中，就像我使用CSS和JavaScript一样。这样，如果我编辑一个文件，所有其他页面都会更新。如果我使用iframe标记，会有很多问题，但我知道没有其他标记可以满足我的需要。那我该怎么办？我做了一些研究，但我能找到的只是iframe标签。。我该怎么办？您可以使用服务器端脚本语言，如php或ruby。或者您可以创建一些say menu.json文件，并使用javascript从中创建菜单如何使我的导航栏在html中保持一致？,html,Html,随着每一个新的页面，我必须更新导航面板。这意味着我要从一页到另一页复制和粘贴我的导航栏。我添加的页面越多，它就变得越难。现在我有了一致的导航栏。所以我要寻找的是一种方法，制作一个只包含导航栏的html文件，然后将其嵌入到我的代码中，就像我使用CSS和JavaScript一样。这样，如果我编辑一个文件，所有其他页面都会更新。如果我使用iframe标记，会有很多问题，但我知道没有其他标记可以满足我的需要。那我该怎么办？我做了一些研究，但我能找到的只是iframe标签。。我该怎么办？您可以使用服务器端
如果你的页面是严格的HTML，那么你只需要做复制和粘贴。如果您使用的是may be PHP，那么您可以简单地执行一个include或require，但是现在的情况是，您所需要的只是为您的导航执行一个干净的HTML编码。缩进你的代码，然后它将更容易为您复制和页面跨越所有页面
如果您可以使用简单的PHP代码，请阅读以下内容：我强烈建议您使用PHP:
<?php include "header.html"; ?>
AddHandler application/x-httpd-php .html .htm
（摘自）如果您想使用PHP实现这一点，您可以执行类似于下面代码的操作。您将有2个“模板”文件，然后是您需要的任意多个“内容”文件
将包括标题上的内容（徽标、导航菜单等）header.php
将包括页脚上的内容（底部导航、版权、免责声明等）footer.php
将包含您希望显示的实际内容。您可以拥有无限多的“内容”页面content.php
.phpcontent.php<?php include "header.php"; ?>
<div class="content">
Your page content will go here
</div>
<?php include "footer.php"; ?>
<html>
<body>
<div class="header">
Header content such as nav bar here
</div>
<div class="footer">
Footer content such as copyright here
</div>
</body>
</html>
您的页面内容将转到此处
<?php include "header.php"; ?>
<div class="content">
Your page content will go here
</div>
<?php include "footer.php"; ?>
<html>
<body>
<div class="header">
Header content such as nav bar here
</div>
<div class="footer">
Footer content such as copyright here
</div>
</body>
</html>
标题内容，如此处的导航栏
<?php include "header.php"; ?>
<div class="content">
Your page content will go here
</div>
<?php include "footer.php"; ?>
<html>
<body>
<div class="header">
Header content such as nav bar here
</div>
<div class="footer">
Footer content such as copyright here
</div>
</body>
</html>
页脚内容，如此处的版权
header.phpfooter.php如果您有任何其他问题，或希望再次解释某件事，请自由发表评论。
在本例中，PHP可能是最好的方法，但由于听起来您已经把所有东西都设置在纯HTML和JavaScript中，所以您可以考虑使用jQuery将外部文件加载到DOM中。jquery.load('header.html')
您可能仍然希望在不打开JavaScript的情况下解决浏览器的回退问题，因此我只是在不了解所有细节的情况下提出这一建议，而且我仍然建议php仍然是一个更好的解决方案，因为您允许服务器完成繁重的工作。我自己解决了这个问题，您可以使用JavaScript文件并使用document.write，然后将其放在您希望的位置：
<script type="text/javascript" src="/js/sidebar.js"/>
document.write("<div id='sidebartop'>");
document.write("<p>Navigation</p>");
document.write("</div>");
document.write（“”）；
文档。写（“导航””；
文件。填写（“”）；
----/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"/>
---/js/sidebar.js----
文件。填写（“”）；
文档。写（“导航””；
文件。填写（“”）；
文件。填写（“”）；
如果（第==1页）{var p=“style='text-decoration:underline；'”}其他{var p=“style='text-decoration:normal；'”}
如果（page==2）{var pp=“style='text-decoration:underline；'”}其他{var pp=“style='text-decoration:normal；'”}
如果（第==3页）{var ppp=“style='text-decoration:underline；”“}否则{var ppp=“style='text-decoration:normal；”
如果（第==4页）{var-pppp=“style='text-decoration:underline；'”}其他{var-pppp=“style='text-decoration:normal；'”}
如果（第==5页）{var-ppppppp=“style='text-decoration:underline；'”}其他{var-ppppp=“style='text-decoration:normal；'”}
文件。写（“主页””；
文档。写（“关于作者的信息””；
文件。写（“七位法师””；
记录。写（“留下评论””；
文件。写（“日历””；
文件。填写（“”）；
----在您希望代码进入的地方----
变量页=5
可能不是最有效的，我强烈建议像其他答案一样使用PHP，但这对我来说很有效，并且不需要在每个url后都使用.PHP。如果您的页面严格使用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>
<body>
<nav id="navMenu"></nav>
<div> rest of web page body here </div>
<script src="script.js"></script>
</body>
网页正文的其余部分在此处
<body>
<nav id="navMenu"></nav>
<div> rest of web page body here </div>
<script src="script.js"></script>
</body>
<body>
<nav id="navMenu"></nav>
<div> rest of web page body here </div>
<script src="script.js"></script>
</body>
网页正文的其余部分在此处
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>';
document.getElementById（“navMenu”）.innerHTML=
“”+
“”+
“”+
“”+
“
”；