我环顾四周，找不到任何解决我问题的方法，虽然有类似的例子，但我想不通。我想制作我的导航栏(垂直)。
我已经尝试使用 Javascript 和 PHP 来解决问题，但我无法使用这两种方法。我只懂 HTML 和 CSS，但不反对学习其他语言，如果它们对这类事情有用的话。
这是我的代码，我希望导航栏出现在每个页面上，并且有一个可编辑的“主文件”，而不是每次需要更改时都手动更改导航栏的内容。
此外，如果可能的话，我想知道如果全局加载导航栏，如何使当前页面“#active”。提前致谢!
* {
margin: 0;
padding: 0;
}
#mainbg {
min-height: 100vh;
width: calc (100vw - 17px);
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://i.imgur.com/NJqUx5y.png);
background-attachment: center;
background-size: cover;
background-repeat: no-repeat;
}
#active {
border-left: 5px solid #feda6a;
}
#navlab {
width: 100%;
text-align: center;
color: #fff;
display: block;
height: 50px;
line-height: 50px;
}
.navbar {
display: block;
position: fixed;
background-color: rgba(57, 63, 77, 0.8);
height: 100vh;
min-width: 10%;
}
.navbar li {
list-style: none;
text-align: center;
}
.navbar a {
display: block;
color: #fff;
text-decoration: none;
padding: 10px 5px;
background-size: 200% 100%;
background-image: linear-gradient(to left, #feda6a 50%, rgba(57, 63, 77, 0.0) 50%);
transition: all 0.3s linear;
}
.navbar a:hover {
background-position: -100%, 0%;
color: #000;
}<body>
<div id="mainbg">
<nav class="navbar">
<p id="navlab">CPPortfolio</p>
<ul>
<li><a id="active" href="index.html">Home</a></li>
<li><a href="hardware.html">Hardware</a></li>
<li><a href="journal.html">Journal</a></li>
</ul>
</nav>
</div>
<div id="container"></div>
</body>最佳答案
您要找的是SPA (单页应用程序)。
A single-page application (SPA) is a web application or web site that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from a server.
您最好的选择是使用提供此功能的框架，在发送请求时仅重新加载页面的一部分(而不是整个页面)。
以下是流行的 SPA 框架列表:
关于html - 如何制作全局导航栏(所有页面一个文件)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57810135/