如何制作可更新的导航栏？

Question

我为我的网站制作了一个导航栏，但我希望能够通过在 JS 中编辑一些代码来更新我网站上的所有导航栏。请注意，我对 JS 的了解非常差，而且我承认用 JavaScript 可能做不到。这是 HTML 代码。

nav {

  list-style-type: none;

  background-color: lightblue;

  border: 1px solid black;

  width: fit-content;

  height: min-content;

  position: fixed;

}

nav li {

  float: left;

}

nav img {

  height: 47px;

  display: block;

  margin-left: auto;

  margin-right: auto;

}

nav li a {

  display: block;

  color: black;

  text-align: center;

  padding: 14px 16px;

  text-decoration: none;

  font-family: -apple-system;

  background-color: lightblue;

}

nav li a:hover {

  background-color: blue;

  color: white;

}

nav .nohover:hover {

  color: white;

}

<nav class="container">

  <li><img src="image" class="navimg"></li>

  <li><a href="website1">website1</a></li>

  <li><a href="webite2">website2</a></li>

  <li><a href="website3">website3</a></li>

</nav>

这些信息将会非常有帮助。如果您知道该怎么做，请告诉我。

Answer 1

对我来说，不太清楚你想要什么，但如果你想更改链接，你可以使用它。我还为a标签提供了一个类，以便我可以使用 JQuery 代码调用它们！编辑： 我们是一个帮助您解决编码问题的社区，而不是为您编写整个代码。因此，请在回答 StackOverflow 上的下一个问题时牢记这一点。编辑2：我保留css了代码，因为它不相关。$(document).ready(function() {&nbsp; &nbsp; $('.link1').parent().html('<a class="link1" href="changed1">changed1</a>');&nbsp; &nbsp; $('.link2').parent().html('<a class="link2" href="changed2">changed2</a>');&nbsp; &nbsp; $('.link3').parent().html('<a class="link3" href="changed3">changed3</a>');&nbsp; &nbsp; // if you want to add a new item to the end&nbsp; &nbsp; $('li:last').append('<li><a class="link4" href="changed4">changed4</a></li>')});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><nav class="container">&nbsp; &nbsp; &nbsp; <li><img&nbsp; src="image" class="navimg"></li>&nbsp; &nbsp; &nbsp; <li><a class="link1" href="website1">website1</a></li>&nbsp; &nbsp; &nbsp; <li><a class="link2" href="webite2">website2</a></li>&nbsp; &nbsp; &nbsp; <li><a class="link3" href="website3">website3</a></li></nav>

Answer 2

删除 HTML 部分并在 js 文件中添加以下代码。您所要做的就是编辑 menuArray。只需填充您想要的数量即可。var menuArray = ['website1', 'website2', 'website3']var navdiv = document.createElement("div");navdiv.setAttribute('class', 'container')var ul = document.createElement("ul");menuArray.forEach((ele) => {&nbsp; var li = document.createElement("li");&nbsp; li.innerHTML = ele&nbsp; ul.appendChild(li)})navdiv.appendChild(ul)document.body.prepend(navdiv);