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

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() {

    $('.link1').parent().html('<a class="link1" href="changed1">changed1</a>');

    $('.link2').parent().html('<a class="link2" href="changed2">changed2</a>');

    $('.link3').parent().html('<a class="link3" href="changed3">changed3</a>');

    // if you want to add a new item to the end

    $('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">

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

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

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

      <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) => {

  var li = document.createElement("li");

  li.innerHTML = ele

  ul.appendChild(li)

})

navdiv.appendChild(ul)

document.body.prepend(navdiv);