我正在尝试制作一个响应式导航栏

Question

我的想法是让锚标记在设置为活动时显示，我尝试使用 JavaScript 访问它们并在单击 div/按钮时使它们处于活动状态（我尝试使用按钮，但它没有t 工作。）。

问题是什么都没有发生。我浏览了我的代码，并没有找到我可能出错的地方。

索引.html：

<!DOCTYPE html>
<html>
<head>
<title>Начало</title>
<link rel="shortcut icon" type="image/png" href="favicon.jpg">
<link rel="stylesheet" href="IndexStyle.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://kit.fontawesome.com/d2896764d5.js" crossorigin="anonymous"></script>
<script src="ResponsiveMenu.js" ></script>
</head>
<body>

<nav class="nav">
    <button class="dot_a">
      <span class="dot" style="background-color: transparent; width: 5px; height: 5px;"></span>
      <span class="dot" style="background-color: #ff4757;"></span>
      <span class="dot" style="background-color: #ffa502"></span>
      <span class="dot" style="background-color: #2ed573;"></span>
  </button>
    <ul class="nav-list">
      <li><a class="anchors" href="Index.html"><i class="fas fa-house-damage"></i>&nbsp;&nbsp;НАЧАЛО</a></li>
      <li><a class="anchors" href="HtmlPage.html"><i class="fas fa-code"></i>&nbsp;&nbsp;HTML&CSS</a></li>
      <li><a class="anchors" href="#"><i class="fas fa-tools"></i>&nbsp;&nbsp;ИНСТРУМЕНТИ</a></li>
      <li><a class="anchors" href="#"><i class="fas fa-thumbtack"></i>&nbsp;&nbsp;ЗАДАЧИ</a></li>
      <li><a class="anchors" href="#"><i class="far fa-address-card "></i>&nbsp;&nbsp;ЗА НАС</a> </li>
    </ul>
  </nav>

</body>
</html>

IndexStyle.css：

body {
  background-image: url(1.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  margin: 0;
}

.pro_column1 {
  width: 15%;
}

.pro_column2 {
  width: 85%;
}

.nav {
  overflow: hidden;
  background-color: white;
  /*opacity: 60%;*/
  margin: 10px;
  border-radius: 10px;
  width: 850px;
  /*background:#3c6382;
  /*box-shadow:0px 5px 20px rgba(0,0,0,0.1);*/
  /*border: solid black 2px;*/
}

.nav-list {
  display:none;
}

.nav-list.active {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav a {
  color: #747d8c;
  text-align: center;
  padding: 35px 10px;
  text-decoration: none;
  font-size: 17px;
  margin: 0;
  border-radius: 10px;
  transition: 1s;
}

.nav a:hover {
  background-color: #ddd;
  color: black;
  -webkit-animation: 1s ease-in forwards;
}

.dot_a {
  /*float: right;*/
  color: #747d8c;
  /*display: block;*/
  text-align: center;
  padding: 30px 10px;
  text-decoration: none;
  font-size: 17px;
  margin: 0;
  display: inline-block;
  border-radius: 10px;
  transition: 1s;
  /*justify-content: center;*/
  /*position: fixed; /* or absolute */
}

i {
  /*float: right;*/
  font-size: 20px;
  border: none;
  outline: none;
  color: #747d8c;
  padding: 32px 5px;
  font-family: inherit;
  margin: 0px;
  border-radius: 20px;
  transition: 1s;
}

.dot {
  height: 15px;
  width: 15px;
  border-radius: 50%;
  display: inline-block;
  margin: 0px;
}

.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  height: 300px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 870px) {
  .nav a {
    padding-top: 5px;
    padding-bottom: 5px;
  }
  div.dot_a {
    padding-top: 3px;
    padding-bottom: 0px;
  }
  .nav {
    width: 90%;
  }
  .dot {
    margin-top: 15px;
    margin-bottom: 15px;
  }
  .nav a:active {
    display: block;
  }
}

ResponsiveMenu.js:
const toggleButton = document.querySelector('.dot_a');
const navbarLinks = document.querySelector('.nav-list');

toggleButton.addEventListener('click', () => {
  navbarLinks.classList.toggle('active')
})

Answer 1

让我们一步一步来，首先让我们看一下 HTML。 HTML5 不再支持中心标记，因此我将其删除。其次，您在我删除的最后一个锚点中有一个额外的引号。为了让所有链接立即显示，您应该将它们包装在一个容器中。在这种情况下，列表最有意义。我已经为你创建了一个导航列表，并将你所有的锚标签包装在一个 li 标签中。

就您的 CSS 而言，我注意到您使用的是 .anchor:active，它是一个伪类。这与拥有一类锚和一类活动不同。如果你想选择一个也有活动类的锚类，你可以使用.anchor.active。在这种情况下，活动类正在导航列表中，因此我使用.nav-list.active 对其进行样式设置

现在是 Javascript。而不是使用它来循环所有锚标记并将它们单独设置为活动，您现在只需切换导航列表上的活动类。这将使所有链接同时出现。

const toggleButton = document.querySelector('.dot_a');
const navbarLinks = document.querySelector('.nav-list');

toggleButton.addEventListener('click', () => {
  navbarLinks.classList.toggle('active')
})

body {
  background-image: url(1.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  margin: 0;
}

.pro_column1 {
  width: 15%;
}

.pro_column2 {
  width: 85%;
}

.nav {
  overflow: hidden;
  background-color: white;
  /*opacity: 60%;*/
  margin: 10px;
  border-radius: 10px;
  width: 850px;
  /*background:#3c6382;
  /*box-shadow:0px 5px 20px rgba(0,0,0,0.1);*/
  /*border: solid black 2px;*/
}

.nav-list {
  display:none;
}

.nav-list.active {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav a {
  color: #747d8c;
  text-align: center;
  padding: 35px 10px;
  text-decoration: none;
  font-size: 17px;
  margin: 0;
  border-radius: 10px;
  transition: 1s;
}

.nav a:hover {
  background-color: #ddd;
  color: black;
  -webkit-animation: 1s ease-in forwards;
}

.dot_a {
  /*float: right;*/
  color: #747d8c;
  /*display: block;*/
  text-align: center;
  padding: 30px 10px;
  text-decoration: none;
  font-size: 17px;
  margin: 0;
  display: inline-block;
  border-radius: 10px;
  transition: 1s;
  /*justify-content: center;*/
  /*position: fixed; /* or absolute */
}

i {
  /*float: right;*/
  font-size: 20px;
  border: none;
  outline: none;
  color: #747d8c;
  padding: 32px 5px;
  font-family: inherit;
  margin: 0px;
  border-radius: 20px;
  transition: 1s;
}

.dot {
  height: 15px;
  width: 15px;
  border-radius: 50%;
  display: inline-block;
  margin: 0px;
}

.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  height: 300px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 870px) {
  .nav a {
    padding-top: 5px;
    padding-bottom: 5px;
  }
  div.dot_a {
    padding-top: 3px;
    padding-bottom: 0px;
  }
  .nav {
    width: 90%;
  }
  .dot {
    margin-top: 15px;
    margin-bottom: 15px;
  }
  .nav a:active {
    display: block;
  }
}

<nav class="nav">
  <button class="dot_a">
    <span class="dot" style="background-color: transparent; width: 5px; height: 5px;"></span>
    <span class="dot" style="background-color: #ff4757;"></span>
    <span class="dot" style="background-color: #ffa502"></span>
    <span class="dot" style="background-color: #2ed573;"></span>
</button>
  <ul class="nav-list">
    <li><a class="anchors" href="Index.html"><i class="fas fa-house-damage"></i>&nbsp;&nbsp;НАЧАЛО</a></li>
    <li><a class="anchors" href="HtmlPage.html"><i class="fas fa-code"></i>&nbsp;&nbsp;HTML&CSS</a></li>
    <li><a class="anchors" href="#"><i class="fas fa-tools"></i>&nbsp;&nbsp;ИНСТРУМЕНТИ</a></li>
    <li><a class="anchors" href="#"><i class="fas fa-thumbtack"></i>&nbsp;&nbsp;ЗАДАЧИ</a></li>
    <li><a class="anchors" href="#"><i class="far fa-address-card "></i>&nbsp;&nbsp;ЗА НАС</a> </li>
  </ul>
</nav>

Answer 2

据我了解，您希望在单击此处激活导航项，这里有一些问题需要修复

1- querySelector 仅返回列表中的第一个元素，因此这里有 5 个带有锚点类的元素，因此它将返回第一个带有 .anchors 类的锚点标记，因此您需要 querySelectorAll

在此处阅读有关 querySelector 的更多信息https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

而querySelectorAll在这里https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

简单地 querySelectorAll 返回一个 nodeList，您可以将其视为一个数组，因此您需要遍历该数组并像这样在每个元素上设置 onclick 事件

const navbarLinks = document.querySelectorAll(".anchors");

navbarLinks.forEach((link) =>
    link.addEventListener("click", (e) => {
        e.target.classList.toggle("active");
    })
);

2- 您似乎没有一个名为 active 的类，因此 classList.toggle 无法正常工作，请将其添加到您的 css

.active {
    background-color: #ddd !important;
    color: black;
}

3- 你的 html 中有一个小错误，最后一个锚标记 (a href="#"") 注意到它有 2 个用于关闭的双引号

4- 使用 (2) 中的前面代码，您会注意到能够选择多个值，这不是我们想要的，因此您应该在 1 处于活动状态时从所有其他锚标记中删除活动类，您可以使用以下代码

link.addEventListener("blur", (e) => {
    link.classList.remove("active");
});

当您不再关注元素时，模糊效果会起作用 在此处查看 MDN 以获取更多信息https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event

这是一个工作示例

const toggleButton = document.querySelector(".dot_a");
const navbarLinks = document.querySelectorAll(".anchors");

navbarLinks.forEach((link) => {
  link.addEventListener("click", (e) => {
    e.target.classList.add("active");
  });

  link.addEventListener("blur", (e) => {
    link.classList.remove("active");
  });
});

body {
  background-image: url(1.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  margin: 0;
}

.pro_column1 {
  width: 15%;
}

.pro_column2 {
  width: 85%;
}

.nav {
  overflow: hidden;
  background-color: white;
  /*opacity: 60%;*/
  margin: 10px;
  border-radius: 10px;
  width: 850px;
  /*background:#3c6382;
  /*box-shadow:0px 5px 20px rgba(0,0,0,0.1);*/
  /*border: solid black 2px;*/
}

.nav a {
  /*float: right;*/
  color: #747d8c;
  /*display: block;*/
  text-align: center;
  padding: 35px 10px;
  text-decoration: none;
  font-size: 17px;
  margin: 0;
  border-radius: 10px;
  transition: 1s;
  /*justify-content: center;*/
  /*position: fixed; /* or absolute */
}

.anchors {
  /*float: right;*/
  color: #747d8c;
  /*display: block;*/
  text-align: center;
  padding: 35px 10px;
  text-decoration: none;
  font-size: 17px;
  margin: 0;
  border-radius: 10px;
  transition: 1s;
  /*justify-content: center;*/
  /*position: fixed; /* or absolute */
}

.nav a:hover {
  background-color: #ddd;
  color: black;
  -webkit-animation: 1s ease-in forwards;
}
.active {
  background-color: #ddd !important;
  color: black !important;
}
.dot_a {
  /*float: right;*/
  color: #747d8c;
  /*display: block;*/
  text-align: center;
  padding: 30px 10px;
  text-decoration: none;
  font-size: 17px;
  margin: 0;
  display: inline-block;
  border-radius: 10px;
  transition: 1s;
  /*justify-content: center;*/
  /*position: fixed; /* or absolute */
}

i {
  /*float: right;*/
  font-size: 20px;
  border: none;
  outline: none;
  color: #747d8c;
  padding: 32px 5px;
  font-family: inherit;
  margin: 0px;
  border-radius: 20px;
  transition: 1s;
}

.dot {
  height: 15px;
  width: 15px;
  border-radius: 50%;
  display: inline-block;
  margin: 0px;
}

.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  height: 300px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 870px) {
  .nav a {
    display: none;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  div.dot_a {
    padding-top: 3px;
    padding-bottom: 0px;
  }

  .nav {
    width: 90%;
  }
  .dot {
    margin-top: 15px;
    margin-bottom: 15px;
  }

  .nav a:active {
    display: block;
  }
}

<head>
  <title>Начало</title>
  <link rel="shortcut icon" type="image/png" href="favicon.jpg">
  <link rel="stylesheet" href="IndexStyle.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="ResponsiveMenu.js" defer></script>
  <script src="https://kit.fontawesome.com/d2896764d5.js" crossorigin="anonymous"></script>
  <script src="ResponsiveMenu.js"></script>
</head>

<body>
  <center>
    <nav class="nav">
      <div class="dot_a" style="pointer-events: none;">
        <span class="dot" style="background-color: transparent; width: 5px; height: 5px;"></span>
        <span class="dot" style="background-color: #ff4757;"></span>
        <span class="dot" style="background-color: #ffa502"></span>
        <span class="dot" style="background-color: #2ed573;"></span>
      </div>

      <a class="anchors" href="#"><i class="fas fa-house-damage"></i>&nbsp;&nbsp;НАЧАЛО</a>

      <a class="anchors" href="#"><i class="fas fa-code"></i>&nbsp;&nbsp;HTML&CSS</a>

      <a class="anchors" href="#"><i class="fas fa-tools"></i>&nbsp;&nbsp;ИНСТРУМЕНТИ</a>

      <a class="anchors" href="#"><i class="fas fa-thumbtack"></i>&nbsp;&nbsp;ЗАДАЧИ</a>

      <a class="anchors" href="#"><i class="far fa-address-card"></i>&nbsp;&nbsp;ЗА НАС</a>
    </nav>
  </center>

</body>