如何在多个页面上重复使用导航栏？
[英]How can I reuse a navigation bar on multiple pages?
问题描述
I just finished making my home/index.html page.
我刚刚完成了我的 home/index.html 页面。 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?还是有另一种方法可以使看起来更干净？
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>
8 个解决方案
解决方案1
100 2017-02-19 22:05:53
This is what helped me.这就是帮助我的原因。 My navigation bar is in the body tag.我的导航栏在 body 标签中。 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 标签，只有导航栏的代码）。 In the target page, this goes in the head tag:在目标页面中，这在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.html into 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-->
解决方案2
37 2015-11-23 16:38:04
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 $.get method to fetch the content of the page.接下来，使用 jQuery 的$.get方法来获取页面的内容。 For example, let's say you've put all the navigation bar's HTML into a file called navigation.html and added a placeholder tag (Like <div id="nav-placeholder"> ) in your index.html , then you would use the following code:例如，假设您已将所有导航栏的 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
4 2015-08-12 01:45:43
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创建一个 header.php，您应该在其中放置菜单和社交媒体等的所有 html 代码
- Insert header.php in your index.php using following code使用以下代码在 index.php 中插入 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. PHP 在其扩展中内置支持 html 代码。 So, better learn this easy fix.所以，最好学习这个简单的修复方法。
解决方案4
3 2018-08-26 09:13:07
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 .shtml extension.一种非常古老但足够简单的技术是使用“服务器端包含” ，将 HTML 页面包含到具有.shtml扩展名的顶级页面中。 For instance this would be your index.shtml file:例如，这将是您的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 执行此操作）。
解决方案5
3
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
解决方案6
1 2021-08-24 15:19:23
Using pure javascript:使用纯 javascript：
Keep your navbar html code in nav.html file.将您的导航栏 html 代码保存在nav.html文件中。
Create nav.js file with this code:使用以下代码创建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);
})
And in other html files that you want navbar add this line:在你想要导航栏的其他 html 文件中添加这一行：
<script id="replace_with_navbar" src="nav.js"></script>
This will replace the script itself with the content of nav.html这将用 nav.html 的内容替换脚本本身
解决方案7
1 2022-02-28 06:41:47
In your javascript file you can create a element with the HTML code as string and then insert that variable in the beginning of your HTML using insertAdjacentHTML keyword在您的 javascript 文件中，您可以使用 HTML 代码作为字符串创建一个元素，然后使用insertAdjacentHTML关键字将该变量插入 HTML 的开头
var navbar = `
<nav>
<div>
<a href="/">
<div id="logo">
<img src="image.png" alt="Home" />
</div>
<div>
<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>
</div>
</nav>`;
// inserting navbar in beginning of body
document.body.insertAdjacentHTML("afterbegin", navbar);
Lastly link the Javascript file to your HTML using最后将 Javascript 文件链接到您的 HTML 使用
script src="script.js"></script>
解决方案8
0 2022-08-15 20:19:03
Very simple without any scripting.非常简单，无需任何脚本。
Write your html in a normal (external) html file and in the html file(s) you want to include its contents, add the following:将 html 写入普通（外部）html 文件和 html 文件中，添加以下内容：
<embed type="text/html" src="my-menu.html">
解决方案9
-1 2017-10-20 16:55:20
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. 假设您已经在navigation.html上有导航代码，并且您将其包含在其他页面中，假设这将是index.php。 To include it place inside the body tag and the navigation bar would be loaded on it. 要将其包含在body标签内，导航栏将加载到其上。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.