如何在多个页面上重用导航栏？

我刚刚完成了我的主页/index.html 页面。保持导航栏的位置，并让它停留，而用户点击通过我的所有网页。我必须复制和粘贴导航代码到每个页面的顶部？还是有别的办法看起来更干净？

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>
278977 次浏览
小开

你可以使用 php 制作多页面网站。

  • 创建一个 header.php，在其中你应该把菜单和社交媒体等所有的 html 代码
  • 使用以下代码在 index.php 中插入 header.php

< ？ 包括“ header.php”; ? >

(以上代码将转储所有 HTML 代码在此之前)您的网站主体内容。

  • 类似地，您可以轻松地创建页脚和其他元素。PHP 内置的扩展支持 html 代码。所以，最好学会这个简单的解决方法。
小开

我知道这是一个相当古老的问题，但是当您有可用的 JavaScript 时，您可以使用 jQuery 及其 AJAX 方法。

首先，创建一个包含所有导航栏 HTML 内容的页面。

接下来，使用 jQuery 的 $.get方法获取页面的内容。例如，假设您已经将所有导航栏的 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>
小开

这就是帮助我的东西。我的导航栏在主体标签里。导航条的整个代码在 nav.html文件中(没有任何 html 或主体标记，只有导航条的代码)。在目标页面的 head标签中:

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

然后在 body 标记中，使用惟一的 id 和 javascript 块创建一个容器，以便将 nav.html加载到容器中，如下所示:

<!--Navigation bar-->
<div id="nav-placeholder">


</div>


<script>
$(function(){
$("#nav-placeholder").load("nav.html");
});
</script>
<!--end of Navigation bar-->
小开

使用 “服务器端包括”是一种非常古老但足够简单的技术，它将 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>

是的，这是蹩脚的，但它工作。请记住在您的 HTTP 服务器配置(这是如何做到这一点，为阿帕奇)中启用 SSI 支持。

小开

白兰度 ZWZ 提供了一些很好的答案来处理这种情况。

回复: 同一个导航栏在多个页面上 Aug 21,201810:13 AM | LINK 2018年8月21日

据我所知，有多种解决方案。

例如:

导航栏的整个代码在 nav.html 文件中(没有任何 html 或 body 标记，只有导航栏的代码)。

然后我们可以直接从 jquery 加载它，而不需要编写大量代码。

像这样:

    <!--Navigation bar-->
<div id="nav-placeholder">


</div>


<script>
$(function(){
$("#nav-placeholder").load("nav.html");
});
</script>
<!--end of Navigation bar-->

解决方案2:

您可以使用 JavaScript 代码来生成整个导航条。

像这样:

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];
}
}
}
}

网址:

<!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

小开

使用纯 javascript:

将导航栏 html 代码保存在 Html文件中。

使用以下代码创建 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);
})

并在其他 HTML 文件中，您想要导航栏添加这一行:

<script id="replace_with_navbar" src="nav.js"></script>

这将用 nav.html 的内容替换脚本本身

小开

在 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);

最后，使用以下命令将 Javascript 文件链接到 HTML

script src="script.js"></script>
小开

非常简单，没有任何脚本。

将 html 写入一个普通(外部) html 文件，并在 html 文件中包含其内容，添加以下内容:

<embed type="text/html" src="my-menu.html">


提交答案