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

Question

提问by BBMAN225

With each new page I have to update the navigation panel. Which means I go from page to page copying and pasting my navigation bar. The more pages I add the harder it gets. Now I have in-consistent navigation bars. So what I'm looking for is a way to make an html file that contains only the navigation bar, then embed it into my code, like I'd do with CSS and JavaScript. That way if I edit the one file all other pages get updated. If I use the iframe tag there would be way to many problems, but I know of no other tag that can do what I need. So what should I do? I've done some research but all I can find is the iframe tag.. What should I do?

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

Answer 1

采纳答案by BBMAN225

I figured it out myself, you can use a JavaScript file and use document.write then put this where you want it to go:

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

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

Here's my js file:

这是我的 js 文件：

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

If you want to use both double quotes and single quotes inside the line, be careful with that, and I think that the < and > signs have to be in double quotes. Here's my full code:

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

     ----/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"/>

Probably not the most efficient, and I'd defiantly recommend using PHP like in the other answers, but this works for me and doesn't need a .php after every url.

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

Answer 2

回答by Filip Gjorgjevikj

If your page is strictly HTML+JavaScript, you can use HTML DOM innerHTML Property. Here is an example:

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

index.html

索引.html

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

about.html

关于.html

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

script.js

脚本.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>';

Important line here is nav tag, and all you need to do is to add this line in other pages in this example about.html.

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

I also recommend PHP or similar to accomplish what you need!

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

Answer 3

回答by OmniPotens

If your page is strictly HTML then you will just have to do copy and paste. It would have been a lot better if you were using may be PHP then you can simply do an includeor requirebut as the situation is now, all you need is to do a clean HTML coding for your navigation. Indent your codes well then it will be easier for you to copy and page across all pages.

如果您的页面是严格的 HTML，那么您只需要复制和粘贴即可。如果您使用的可能是 PHP，那会好得多，然后您可以简单地执行包含或要求，但就目前的情况而言，您只需要为导航进行干净的 HTML 编码。缩进你的代码，这样你就可以更轻松地在所有页面上复制和翻页。

If you can use simple PHP codes then read this: http://www.w3schools.com/php/php_includes.asp

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

Answer 4

回答by Danny Beckett

I'd stronglyrecommend using PHP:

我强烈建议使用 PHP：

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

However, if that is not an option, you can use Server Side Includes:

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

File in the same dir:

同一目录下的文件：

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

File in a different dir:

文件在不同的目录：

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

You'll need a Linux/Apache (not Windows) server for this to work. You'll also need to use the .shtmlfile extension.

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

Alternatively, given that you want to keep .htmlextensions, you can make Apache "think" that all .htmlfiles are actually .php:

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

Create a .htaccess file at the root of your website and add this line:

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

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

If your are running PHP as CGI (probably not the case), you should write instead:

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

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

(Taken from this answer)

（取自这个答案）

Answer 5

回答by Charles

If you would like to use PHP to achieve, this, you can do something similar to the code below. You'll have 2 "template" files, and then however many "content" files you need.

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

header.phpwill include content on the header (logo, nav menu, etc)
footer.phpwill include content on the footer (bottom navigation, copyright, disclaimers, etc.)
content.phpwill include the actual content you wish to display. You can have an infinite number of "content" pages.

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

Note that while these files have .phpextensions, HTML code still works perfectly fine. So you can do something like this for every content.php:

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

content.php

内容.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

页脚.php

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

In this way, you can change the contents of header.phpand footer.phpjust once, and the changes will be reflected in all the pages you've included the files in.

通过这种方式，你可以改变的内容header.php，并footer.php只有一次，并且更改将在所有已包含在文件的页面中反映出来。

If you have any further questions or would like something explained again, feel free to post a comment.

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

Answer 6

回答by BerlinaLi

In fact, if you are doing only front-end stuff like I do, using load() with jQuery is more than enough. Just like what Skitty and fskirschbaum said.

事实上，如果你像我一样只做前端的事情，使用 jQuery 的 load() 就足够了。就像斯基蒂和 fskirschbaum 所说的那样。

But I would like to add a few points,
1. based on @Skitty's comment, it is important to load your navbar.html on the server side, like simply host it on your github.io website and refer to it by its URL like

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

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

2. if you have css file, just put it inside < style >< /style> in the < header > part of your html file.

2.如果你有css文件，只要把它放在你的html文件的<header>部分的<style></style>里面。

I push my code on github if you need some reference. Hope it helps! https://github.com/BerlinaLI/berlinali.github.io/tree/master/test%20header%20template

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

Answer 7

回答by fskirschbaum

PHP would probably be the best method in this case, but since it sounds like you already have everything set up in pure HTML and JavaScript, you could consider using jQuery to load an external file into the DOM.

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

jquery.load('header.html')

This, of course has its own set of concerns, but you can effectively control everything from a simple .js framework without having to use php includes and doesn't require an iFrame.

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

You'd still potentially want to address a fallback for browsers without JavaScript turned on, so I only suggest this without knowing all the details, and I would still suggest that php would still be a better solution since you're allowing the server to do the heavy lifting.

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

Answer 8

回答by Skitty

Simply use jQuery .load(). It is very easy to use. Here's an example

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

navbar.html

导航栏.html

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

index.html

索引.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

关于.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>

Answer 9

回答by kirugan

You can use server side scripting languages like php or ruby. Or you can create some say menu.json file and create menu from that in javascript.

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

With serverside you should setup server or you can use XAMPPfor fast setup.
Create header.html with all your menu links
Inlude menu file by using <?php include 'header.html'; ?>line (all files where you use it should be with .php extension or you can edit php config file for .html extension)

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

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

提问by BBMAN225

采纳答案by BBMAN225

回答by Filip Gjorgjevikj

回答by OmniPotens

回答by Danny Beckett

回答by Charles

回答by BerlinaLi

回答by fskirschbaum

回答by Skitty

回答by kirugan

相关推荐

最近更新

标签

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

提问by BBMAN225

采纳答案by BBMAN225

回答by Filip Gjorgjevikj

回答by OmniPotens

回答by Danny Beckett

回答by Charles

回答by BerlinaLi

回答by fskirschbaum

回答by Skitty

回答by kirugan

相关推荐

如何将图像放在文本 HTML 前面？

Html 在 CSS 中使用多个 @font-face 规则

Html 如何使用 twitter bootstrap 正确对齐元素？

Html 使一个 div 填满剩余的宽度

相关推荐

最近更新

标签