Html 如何在多个页面上重复使用导航栏？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31954089/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I reuse a navigation bar on multiple pages?
提问by blackRob4953
I just finished making my home/index.html page. To keep the nav bar where it is, and have it stay while users click through all my pages. Do I have to copy and paste the nav code to the top of each page? Or is there another way to do so that would look cleaner?
我刚刚完成了我的 home/index.html 页面。将导航栏保持在原处，并在用户点击我的所有页面时保持导航栏不变。我是否必须将导航代码复制并粘贴到每个页面的顶部？或者有没有另一种方法可以看起来更干净？
HMTL nav:
HMTL导航：
<nav>
<div>
<a href="/">
<div id="logo"><img src="image.png" alt="Home"/></div>
<div id="headtag"><img src="image.png" alt="Home"/></div>
<div id="tagline"><img src="image.png" alt="Home"/></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>
回答by Ramtin
This is what helped me. My navigation bar is in the body tag. Entire code for navigation bar is in nav.htmlfile (without any html or body tag, only the code for navigation bar). In the target page, this goes in the headtag:
这就是帮助我的原因。我的导航栏在 body 标签中。导航栏的整个代码都在nav.html文件中（没有任何 html 或 body 标签，只有导航栏的代码）。在目标页面中，这在head标签中：
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
Then in the body tag, a container is made with an unique id and a javascript block to load the nav.htmlinto the container, as follows:
然后在 body 标签中，创建一个容器，带有唯一的 id 和一个 javascript 块以将其加载nav.html到容器中，如下所示：
<!--Navigation bar-->
<div id="nav-placeholder">
</div>
<script>
$(function(){
$("#nav-placeholder").load("nav.html");
});
</script>
<!--end of Navigation bar-->
回答by Jacques Marais
I know this is a quite old question, but when you have JavaScript available you could use jQuery and its AJAX methods.
我知道这是一个很老的问题，但是当您有可用的 JavaScript 时，您可以使用 jQuery 及其 AJAX 方法。
First, create a page with all the navigation bar's HTML content.
首先，创建一个包含所有导航栏 HTML 内容的页面。
Next, use jQuery's $.getmethod to fetch the content of the page. For example, let's say you've put all the navigation bar's HTML into a file called navigation.htmland added a placeholder tag (Like <div id="nav-placeholder">) in your index.html, then you would use the following code:
接下来，使用 jQuery 的$.get方法来获取页面的内容。例如，假设您已将所有导航栏的 HTML 放入一个名为的文件中，navigation.html并<div id="nav-placeholder">在您的 中添加了一个占位符标记（Like ）index.html，那么您将使用以下代码：
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$.get("navigation.html", function(data){
$("#nav-placeholder").replaceWith(data);
});
</script>
回答by Sachin Kanungo
You can use php for making multi-page website.
您可以使用 php 制作多页网站。
- Create a header.php in which you should put all your html code for menu's and social media etc
- Insert header.php in your index.php using following code
- 创建一个 header.php，您应该在其中放置菜单和社交媒体等的所有 html 代码
- 使用以下代码在 index.php 中插入 header.php
<?
php include 'header.php';
?>
<?
php include 'header.php';
?>
(Above code will dump all html code before this)Your site body content.
（以上代码将在此之前转储所有 html 代码）您的网站正文内容。
- Similarly you can create footer and other elements with ease. PHP built-in support html code in their extensions. So, better learn this easy fix.
- 同样，您可以轻松创建页脚和其他元素。PHP 在其扩展中内置支持 html 代码。所以，最好学习这个简单的修复方法。
回答by Laryx Decidua
A very old but simple enough technique is to use "Server-Side Includes", to include HTML pages into a top-level page that has the .shtmlextension. For instance this would be your index.shtmlfile:
一种非常古老但足够简单的技术是使用“服务器端包含”，将 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>
Yes, it is lame, but it works. Remember to enable SSI support in your HTTP server configuration (this is how to do it for Apache).
是的，它很蹩脚，但它有效。请记住在您的 HTTP 服务器配置中启用 SSI 支持（这是如何为 Apache 执行此操作）。
回答by Laryx Decidua
Brando ZWZ provides some great answers to handling this situation.
Brando ZWZ 为处理这种情况提供了一些很好的答案。
Re: Same navbar on multiple pages Aug 21, 2018 10:13 AM|LINK
回复：多个页面上的相同导航栏 2018 年 8 月 21 日上午 10:13|LINK
As far as I know, there are multiple solution.
据我所知，有多种解决方案。
For example:
例如：
The Entire code for navigation bar is in nav.html file (without any html or body tag, only the code for navigation bar).
导航栏的完整代码在 nav.html 文件中（没有任何 html 或 body 标签，只有导航栏的代码）。
Then we could directly load it from the jquery without writing a lot of codes.
然后我们就可以直接从jquery中加载了，不用写很多代码。
Like this:
像这样：
<!--Navigation bar-->
<div id="nav-placeholder">
</div>
<script>
$(function(){
$("#nav-placeholder").load("nav.html");
});
</script>
<!--end of Navigation bar-->
Solution2:
解决方案2：
You could use JavaScript code to generate the whole nav bar.
您可以使用 JavaScript 代码生成整个导航栏。
Like this:
像这样：
Javascript code:
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
https://forums.asp.net/t/2145711.aspx?Same+navbar+on+multiple+pages
回答by qw12
I don't know if it'll work for you but it works for me. Try to place the navigation codes without any header or body tag(just the code where the navigation bar started and ended). What will happen is you'll be placing separately the codes for the navigation bar. Let's say you already have the navigation codes on navigation.html and you'll include it to other page, let's say that would be index.php. To include it place inside the body tag and the navigation bar would be loaded on it.
我不知道它是否对你有用，但它对我有用。尝试放置没有任何标题或正文标记的导航代码（只是导航栏开始和结束的代码）。将会发生的是，您将单独放置导航栏的代码。假设您已经在navigation.html 上有了导航代码，并且您将把它包含在其他页面中，假设它是index.php。将它包含在 body 标签内，导航栏将加载到它上面。
