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

Question

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

问题是没有任何反应。我运行通过我的代码并没有找到我可能错的地方。

Index.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 不再支持 center 标签，所以我删除了它。其次，您在我删除的最后一个锚点中有一个额外的引号。为了立即显示所有链接，您应该将它们包装在一个容器中。在这种情况下，列表最有意义。我已经为你创建了一个导航列表，并将你所有的锚标签包装在一个 li 标签中。

就您的 CSS 而言，我注意到您使用的是伪 class .anchor:active。这与具有 class 的锚点和 class 的活动不同。如果你想要 select 一个 class 的锚点，它也有一个 class 的活动锚点，你可以使用 .anchor.active。在这种情况下，活动 class 将出现在导航列表中，因此我使用 .nav-list.active

对其进行样式设置

现在 Javascript。您现在无需使用它来遍历所有锚标记并将它们单独设置为活动状态，而只需切换导航列表中的活动 class 即可。这将使所有链接同时出现。

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 return 只是列表中的第一个元素，所以这里有 5 个元素带有 class 个锚点，因此它将 return 第一个锚点标记为class 个 .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 return是一个您可以将其视为数组的nodeList，因此您需要遍历该数组并像这样在每个元素上设置onclick事件

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

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

2- 您似乎没有一个名为 active 的 class，因此 classList.toggle 将不起作用，将其添加到您的 css

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

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

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

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

blur 在您不再关注元素时起作用在此处查看 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>

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

I am trying to make a responsive nav bar

html

javascript

css

navigation

responsive