如何link 一个页面导航与多个页面混合？
How to link One page navigation mixed with multiple pages?
我是开发新手，所以请原谅我的知识不足。我正在尝试创建一个包含多个页面的单页网站。有一个主页 index.html，它通过各个部分导航，但问题是当我进入多个页面之一时，我无法 return 到 index.html。我应该使用 href "www.mydomain.com/index.html" 到 return，还是有其他方法？？
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="container-fluid text-center">
<a class="navbar-brand" href="https://mink.agency/"><img class="logo" src="./images/logo.png" alt=""></a>
<button class="navbar-toggler first-button animated-icon1" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span></span><span></span><span></span>
</button>
<div class="collapse navbar-collapse " id="navbarSupportedContent">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link " aria-current="page" href="#about">about us.</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#work">our work.</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#team">the team.</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#our-clients">our clients.</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#connect">let's connect!</a>
</li>
</ul>
</div>
</div>
</nav>
<section class="bg-success" id="about">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet semper justo, a semper massa efficitur in. Proin hendrerit sem eget gravida porta. Maecenas consectetur magna nec elit auctor, scelerisque malesuada nibh lacinia. Fusce commodo sem a lectus dictum pharetra. Maecenas pretium risus a convallis malesuada. Donec fermentum orci erat, in condimentum lectus varius quis. Suspendisse imperdiet semper iaculis. Nam tellus nisl, fermentum quis lacus molestie, fermentum lobortis urna. Mauris in massa efficitur, ultrices mauris quis, finibus enim. Integer sit amet auctor nunc. Nulla porta suscipit magna, vel facilisis est condimentum ac. Aliquam luctus mi nec diam posuere, eu porta orci suscipit. Fusce eu velit neque. In nec convallis nisl. Praesent rhoncus egestas ipsum, sit amet scelerisque purus hendrerit eget.
Nunc pharetra erat turpis, non tempor velit molestie quis. Curabitur vitae tempor felis. Nulla mollis sodales metus eget eleifend. Fusce tincidunt ante sit amet turpis finibus, volutpat sollicitudin est consectetur. Proin suscipit neque et neque posuere, quis consectetur elit rutrum. Pellentesque hendrerit lobortis justo, nec egestas felis eleifend vel. Aliquam lobortis elementum nisl ac ultricies. Phasellus scelerisque diam ac metus sagittis, eu finibus mauris varius. Maecenas quis iaculis tortor, eu accumsan lectus. Nunc pellentesque justo nec lectus vulputate pretium. Suspendisse justo nulla, interdum sit amet tellus nec, laoreet fringilla libero. Phasellus ut mi aliquet, lacinia ligula eu, blandit ipsum. Integer ac ante dictum, lobortis velit ut, gravida lectus. Suspendisse quis felis quis leo fermentum gravida in in justo.
</section>
<section id="work">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet semper justo, a semper massa efficitur in. Proin hendrerit sem eget gravida porta. Maecenas consectetur magna nec elit auctor, scelerisque malesuada nibh lacinia. Fusce commodo sem a lectus dictum pharetra. Maecenas pretium risus a convallis malesuada. Donec fermentum orci erat, in condimentum lectus varius quis. Suspendisse imperdiet semper iaculis. Nam tellus nisl, fermentum quis lacus molestie, fermentum lobortis urna. Mauris in massa efficitur, ultrices mauris quis, finibus enim. Integer sit amet auctor nunc. Nulla porta suscipit magna, vel facilisis est condimentum ac. Aliquam luctus mi nec diam posuere, eu porta orci suscipit. Fusce eu velit neque. In nec convallis nisl. Praesent rhoncus egestas ipsum, sit amet scelerisque purus hendrerit eget.
Nunc pharetra erat turpis, non tempor velit molestie quis. Curabitur vitae tempor felis. Nulla mollis sodales metus eget eleifend. Fusce tincidunt ante sit amet turpis finibus, volutpat sollicitudin est consectetur. Proin suscipit neque et neque posuere, quis consectetur elit rutrum. Pellentesque hendrerit lobortis justo, nec egestas felis eleifend vel. Aliquam lobortis elementum nisl ac ultricies. Phasellus scelerisque diam ac metus sagittis, eu finibus mauris varius. Maecenas quis iaculis tortor, eu accumsan lectus. Nunc pellentesque justo nec lectus vulputate pretium. Suspendisse justo nulla, interdum sit amet tellus nec, laoreet fringilla libero. Phasellus ut mi aliquet, lacinia ligula eu, blandit ipsum. Integer ac ante dictum, lobortis velit ut, gravida lectus. Suspendisse quis felis quis leo fermentum gravida in in justo.
</section>
<section id="team">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet semper justo, a semper massa efficitur in. Proin hendrerit sem eget gravida porta. Maecenas consectetur magna nec elit auctor, scelerisque malesuada nibh lacinia. Fusce commodo sem a lectus dictum pharetra. Maecenas pretium risus a convallis malesuada. Donec fermentum orci erat, in condimentum lectus varius quis. Suspendisse imperdiet semper iaculis. Nam tellus nisl, fermentum quis lacus molestie, fermentum lobortis urna. Mauris in massa efficitur, ultrices mauris quis, finibus enim. Integer sit amet auctor nunc. Nulla porta suscipit magna, vel facilisis est condimentum ac. Aliquam luctus mi nec diam posuere, eu porta orci suscipit. Fusce eu velit neque. In nec convallis nisl. Praesent rhoncus egestas ipsum, sit amet scelerisque purus hendrerit eget.
Nunc pharetra erat turpis, non tempor velit molestie quis. Curabitur vitae tempor felis. Nulla mollis sodales metus eget eleifend. Fusce tincidunt ante sit amet turpis finibus, volutpat sollicitudin est consectetur. Proin suscipit neque et neque posuere, quis consectetur elit rutrum. Pellentesque hendrerit lobortis justo, nec egestas felis eleifend vel. Aliquam lobortis elementum nisl ac ultricies. Phasellus scelerisque diam ac metus sagittis, eu finibus mauris varius. Maecenas quis iaculis tortor, eu accumsan lectus. Nunc pellentesque justo nec lectus vulputate pretium. Suspendisse justo nulla, interdum sit amet tellus nec, laoreet fringilla libero. Phasellus ut mi aliquet, lacinia ligula eu, blandit ipsum. Integer ac ante dictum, lobortis velit ut, gravida lectus. Suspendisse quis felis quis leo fermentum gravida in in justo.
</section>
<section class="bg-warning" id="ourclients">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet semper justo, a semper massa efficitur in. Proin hendrerit sem eget gravida porta. Maecenas consectetur magna nec elit auctor, scelerisque malesuada nibh lacinia. Fusce commodo sem a lectus dictum pharetra. Maecenas pretium risus a convallis malesuada. Donec fermentum orci erat, in condimentum lectus varius quis. Suspendisse imperdiet semper iaculis. Nam tellus nisl, fermentum quis lacus molestie, fermentum lobortis urna. Mauris in massa efficitur, ultrices mauris quis, finibus enim. Integer sit amet auctor nunc. Nulla porta suscipit magna, vel facilisis est condimentum ac. Aliquam luctus mi nec diam posuere, eu porta orci suscipit. Fusce eu velit neque. In nec convallis nisl. Praesent rhoncus egestas ipsum, sit amet scelerisque purus hendrerit eget.
Nunc pharetra erat turpis, non tempor velit molestie quis. Curabitur vitae tempor felis. Nulla mollis sodales metus eget eleifend. Fusce tincidunt ante sit amet turpis finibus, volutpat sollicitudin est consectetur. Proin suscipit neque et neque posuere, quis consectetur elit rutrum. Pellentesque hendrerit lobortis justo, nec egestas felis eleifend vel. Aliquam lobortis elementum nisl ac ultricies. Phasellus scelerisque diam ac metus sagittis, eu finibus mauris varius. Maecenas quis iaculis tortor, eu accumsan lectus. Nunc pellentesque justo nec lectus vulputate pretium. Suspendisse justo nulla, interdum sit amet tellus nec, laoreet fringilla libero. Phasellus ut mi aliquet, lacinia ligula eu, blandit ipsum. Integer ac ante dictum, lobortis velit ut, gravida lectus. Suspendisse quis felis quis leo fermentum gravida in in justo.
</section>
<section class="bg-danger" id="connect">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet semper justo, a semper massa efficitur in. Proin hendrerit sem eget gravida porta. Maecenas consectetur magna nec elit auctor, scelerisque malesuada nibh lacinia. Fusce commodo sem a lectus dictum pharetra. Maecenas pretium risus a convallis malesuada. Donec fermentum orci erat, in condimentum lectus varius quis. Suspendisse imperdiet semper iaculis. Nam tellus nisl, fermentum quis lacus molestie, fermentum lobortis urna. Mauris in massa efficitur, ultrices mauris quis, finibus enim. Integer sit amet auctor nunc. Nulla porta suscipit magna, vel facilisis est condimentum ac. Aliquam luctus mi nec diam posuere, eu porta orci suscipit. Fusce eu velit neque. In nec convallis nisl. Praesent rhoncus egestas ipsum, sit amet scelerisque purus hendrerit eget.
Nunc pharetra erat turpis, non tempor velit molestie quis. Curabitur vitae tempor felis. Nulla mollis sodales metus eget eleifend. Fusce tincidunt ante sit amet turpis finibus, volutpat sollicitudin est consectetur. Proin suscipit neque et neque posuere, quis consectetur elit rutrum. Pellentesque hendrerit lobortis justo, nec egestas felis eleifend vel. Aliquam lobortis elementum nisl ac ultricies. Phasellus scelerisque diam ac metus sagittis, eu finibus mauris varius. Maecenas quis iaculis tortor, eu accumsan lectus. Nunc pellentesque justo nec lectus vulputate pretium. Suspendisse justo nulla, interdum sit amet tellus nec, laoreet fringilla libero. Phasellus ut mi aliquet, lacinia ligula eu, blandit ipsum. Integer ac ante dictum, lobortis velit ut, gravida lectus. Suspendisse quis felis quis leo fermentum gravida in in justo.
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
我做到了。我的导航栏在 body 标签中。导航栏的全部代码在 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-->
您也可以使用 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];
}
}
}
}
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>
我是开发新手，所以请原谅我的知识不足。我正在尝试创建一个包含多个页面的单页网站。有一个主页 index.html，它通过各个部分导航，但问题是当我进入多个页面之一时，我无法 return 到 index.html。我应该使用 href "www.mydomain.com/index.html" 到 return，还是有其他方法？？
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="container-fluid text-center">
<a class="navbar-brand" href="https://mink.agency/"><img class="logo" src="./images/logo.png" alt=""></a>
<button class="navbar-toggler first-button animated-icon1" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span></span><span></span><span></span>
</button>
<div class="collapse navbar-collapse " id="navbarSupportedContent">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link " aria-current="page" href="#about">about us.</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#work">our work.</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#team">the team.</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#our-clients">our clients.</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#connect">let's connect!</a>
</li>
</ul>
</div>
</div>
</nav>
<section class="bg-success" id="about">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet semper justo, a semper massa efficitur in. Proin hendrerit sem eget gravida porta. Maecenas consectetur magna nec elit auctor, scelerisque malesuada nibh lacinia. Fusce commodo sem a lectus dictum pharetra. Maecenas pretium risus a convallis malesuada. Donec fermentum orci erat, in condimentum lectus varius quis. Suspendisse imperdiet semper iaculis. Nam tellus nisl, fermentum quis lacus molestie, fermentum lobortis urna. Mauris in massa efficitur, ultrices mauris quis, finibus enim. Integer sit amet auctor nunc. Nulla porta suscipit magna, vel facilisis est condimentum ac. Aliquam luctus mi nec diam posuere, eu porta orci suscipit. Fusce eu velit neque. In nec convallis nisl. Praesent rhoncus egestas ipsum, sit amet scelerisque purus hendrerit eget.
Nunc pharetra erat turpis, non tempor velit molestie quis. Curabitur vitae tempor felis. Nulla mollis sodales metus eget eleifend. Fusce tincidunt ante sit amet turpis finibus, volutpat sollicitudin est consectetur. Proin suscipit neque et neque posuere, quis consectetur elit rutrum. Pellentesque hendrerit lobortis justo, nec egestas felis eleifend vel. Aliquam lobortis elementum nisl ac ultricies. Phasellus scelerisque diam ac metus sagittis, eu finibus mauris varius. Maecenas quis iaculis tortor, eu accumsan lectus. Nunc pellentesque justo nec lectus vulputate pretium. Suspendisse justo nulla, interdum sit amet tellus nec, laoreet fringilla libero. Phasellus ut mi aliquet, lacinia ligula eu, blandit ipsum. Integer ac ante dictum, lobortis velit ut, gravida lectus. Suspendisse quis felis quis leo fermentum gravida in in justo.
</section>
<section id="work">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet semper justo, a semper massa efficitur in. Proin hendrerit sem eget gravida porta. Maecenas consectetur magna nec elit auctor, scelerisque malesuada nibh lacinia. Fusce commodo sem a lectus dictum pharetra. Maecenas pretium risus a convallis malesuada. Donec fermentum orci erat, in condimentum lectus varius quis. Suspendisse imperdiet semper iaculis. Nam tellus nisl, fermentum quis lacus molestie, fermentum lobortis urna. Mauris in massa efficitur, ultrices mauris quis, finibus enim. Integer sit amet auctor nunc. Nulla porta suscipit magna, vel facilisis est condimentum ac. Aliquam luctus mi nec diam posuere, eu porta orci suscipit. Fusce eu velit neque. In nec convallis nisl. Praesent rhoncus egestas ipsum, sit amet scelerisque purus hendrerit eget.
Nunc pharetra erat turpis, non tempor velit molestie quis. Curabitur vitae tempor felis. Nulla mollis sodales metus eget eleifend. Fusce tincidunt ante sit amet turpis finibus, volutpat sollicitudin est consectetur. Proin suscipit neque et neque posuere, quis consectetur elit rutrum. Pellentesque hendrerit lobortis justo, nec egestas felis eleifend vel. Aliquam lobortis elementum nisl ac ultricies. Phasellus scelerisque diam ac metus sagittis, eu finibus mauris varius. Maecenas quis iaculis tortor, eu accumsan lectus. Nunc pellentesque justo nec lectus vulputate pretium. Suspendisse justo nulla, interdum sit amet tellus nec, laoreet fringilla libero. Phasellus ut mi aliquet, lacinia ligula eu, blandit ipsum. Integer ac ante dictum, lobortis velit ut, gravida lectus. Suspendisse quis felis quis leo fermentum gravida in in justo.
</section>
<section id="team">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet semper justo, a semper massa efficitur in. Proin hendrerit sem eget gravida porta. Maecenas consectetur magna nec elit auctor, scelerisque malesuada nibh lacinia. Fusce commodo sem a lectus dictum pharetra. Maecenas pretium risus a convallis malesuada. Donec fermentum orci erat, in condimentum lectus varius quis. Suspendisse imperdiet semper iaculis. Nam tellus nisl, fermentum quis lacus molestie, fermentum lobortis urna. Mauris in massa efficitur, ultrices mauris quis, finibus enim. Integer sit amet auctor nunc. Nulla porta suscipit magna, vel facilisis est condimentum ac. Aliquam luctus mi nec diam posuere, eu porta orci suscipit. Fusce eu velit neque. In nec convallis nisl. Praesent rhoncus egestas ipsum, sit amet scelerisque purus hendrerit eget.
Nunc pharetra erat turpis, non tempor velit molestie quis. Curabitur vitae tempor felis. Nulla mollis sodales metus eget eleifend. Fusce tincidunt ante sit amet turpis finibus, volutpat sollicitudin est consectetur. Proin suscipit neque et neque posuere, quis consectetur elit rutrum. Pellentesque hendrerit lobortis justo, nec egestas felis eleifend vel. Aliquam lobortis elementum nisl ac ultricies. Phasellus scelerisque diam ac metus sagittis, eu finibus mauris varius. Maecenas quis iaculis tortor, eu accumsan lectus. Nunc pellentesque justo nec lectus vulputate pretium. Suspendisse justo nulla, interdum sit amet tellus nec, laoreet fringilla libero. Phasellus ut mi aliquet, lacinia ligula eu, blandit ipsum. Integer ac ante dictum, lobortis velit ut, gravida lectus. Suspendisse quis felis quis leo fermentum gravida in in justo.
</section>
<section class="bg-warning" id="ourclients">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet semper justo, a semper massa efficitur in. Proin hendrerit sem eget gravida porta. Maecenas consectetur magna nec elit auctor, scelerisque malesuada nibh lacinia. Fusce commodo sem a lectus dictum pharetra. Maecenas pretium risus a convallis malesuada. Donec fermentum orci erat, in condimentum lectus varius quis. Suspendisse imperdiet semper iaculis. Nam tellus nisl, fermentum quis lacus molestie, fermentum lobortis urna. Mauris in massa efficitur, ultrices mauris quis, finibus enim. Integer sit amet auctor nunc. Nulla porta suscipit magna, vel facilisis est condimentum ac. Aliquam luctus mi nec diam posuere, eu porta orci suscipit. Fusce eu velit neque. In nec convallis nisl. Praesent rhoncus egestas ipsum, sit amet scelerisque purus hendrerit eget.
Nunc pharetra erat turpis, non tempor velit molestie quis. Curabitur vitae tempor felis. Nulla mollis sodales metus eget eleifend. Fusce tincidunt ante sit amet turpis finibus, volutpat sollicitudin est consectetur. Proin suscipit neque et neque posuere, quis consectetur elit rutrum. Pellentesque hendrerit lobortis justo, nec egestas felis eleifend vel. Aliquam lobortis elementum nisl ac ultricies. Phasellus scelerisque diam ac metus sagittis, eu finibus mauris varius. Maecenas quis iaculis tortor, eu accumsan lectus. Nunc pellentesque justo nec lectus vulputate pretium. Suspendisse justo nulla, interdum sit amet tellus nec, laoreet fringilla libero. Phasellus ut mi aliquet, lacinia ligula eu, blandit ipsum. Integer ac ante dictum, lobortis velit ut, gravida lectus. Suspendisse quis felis quis leo fermentum gravida in in justo.
</section>
<section class="bg-danger" id="connect">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet semper justo, a semper massa efficitur in. Proin hendrerit sem eget gravida porta. Maecenas consectetur magna nec elit auctor, scelerisque malesuada nibh lacinia. Fusce commodo sem a lectus dictum pharetra. Maecenas pretium risus a convallis malesuada. Donec fermentum orci erat, in condimentum lectus varius quis. Suspendisse imperdiet semper iaculis. Nam tellus nisl, fermentum quis lacus molestie, fermentum lobortis urna. Mauris in massa efficitur, ultrices mauris quis, finibus enim. Integer sit amet auctor nunc. Nulla porta suscipit magna, vel facilisis est condimentum ac. Aliquam luctus mi nec diam posuere, eu porta orci suscipit. Fusce eu velit neque. In nec convallis nisl. Praesent rhoncus egestas ipsum, sit amet scelerisque purus hendrerit eget.
Nunc pharetra erat turpis, non tempor velit molestie quis. Curabitur vitae tempor felis. Nulla mollis sodales metus eget eleifend. Fusce tincidunt ante sit amet turpis finibus, volutpat sollicitudin est consectetur. Proin suscipit neque et neque posuere, quis consectetur elit rutrum. Pellentesque hendrerit lobortis justo, nec egestas felis eleifend vel. Aliquam lobortis elementum nisl ac ultricies. Phasellus scelerisque diam ac metus sagittis, eu finibus mauris varius. Maecenas quis iaculis tortor, eu accumsan lectus. Nunc pellentesque justo nec lectus vulputate pretium. Suspendisse justo nulla, interdum sit amet tellus nec, laoreet fringilla libero. Phasellus ut mi aliquet, lacinia ligula eu, blandit ipsum. Integer ac ante dictum, lobortis velit ut, gravida lectus. Suspendisse quis felis quis leo fermentum gravida in in justo.
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
我做到了。我的导航栏在 body 标签中。导航栏的全部代码在 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-->
您也可以使用 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];
}
}
}
}
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>