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

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

问题是什么都没发生。我浏览了我的代码，没有发现哪里可能出错。

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')
})

让我们一步一个脚印，首先来看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>

据我所知，你想在点击时激活导航项目，这里有一些问题可以修复

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

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

并在此处查询SelectorAllhttps://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="#"(注意到它有两个双引号用于关闭

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>

相关内容

最新更新

热门标签：