Question

我环顾四周，找不到解决我问题的任何东西，尽管有类似的例子，但我无法弄清楚。我想将导航栏设置为垂直。

我试图用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>

Answer 1

您要寻找的是SPA（单页应用程序）。

单页应用程序（SPA）是通过动态重写当前页面而不是从服务器加载整个新页面来与用户交互的Web应用程序或网站。

最好的选择是使用一个提供此功能的框架，该框架在发送请求时仅重新加载部分页面（不是整个页面）。

以下是流行的SPA框架列表：

Answer 2

这是您的意思吗？

JavaScript：

var lnk = document.querySelectorAll('.navbar a');
Array.from(lnk).forEach( a=>{
    a.removeAttribute('id');
});
document.querySelector('[href$="'+/[^/]*$/.exec(window.location.pathname)[0]+'"]').setAttribute('id','active');

如何制作全局导航栏（所有页面上一个文件）？

2 个答案: