我缺少该代码的错误吗?这应该可以,但是不能。我已经使用JavaScript和jQuery尝试了所有不同的版本,似乎它没有针对list元素。
var a = document.querySelectorAll("#ul");
for (var i = 0; length = a.length; i++) {
a[i].onclick = function() {
var b = document.querySelector("li.active");
if (b) {
b.classList.remove("active");
}
a[i].classList.add("active");
};
}
ul {
display: flex;
flex-direction: row;
list-style: none;
align-items: center;
li {
margin-right: 1.875rem;
padding: 0 1rem;
font-size: 0.875rem;
text-align: center;
cursor: pointer;
a {
text-decoration: none;
color: black;
font-weight: bold;
}
&:hover {
border-bottom: 3px solid $orange;
}
}
}
.active {
background-color: gray;
border-bottom: 3px solid $orange;
}
```<nav class="nav">
<ul id="#ul">
<li class="li active"><a href="#">Home</a></li>
<li class="li" ><a href="#">Discover</a></li>
<li class="li"><a href="#">About us</a></li>
<li class="li"><a href="#">Contact</a></li>
<li class="li" ><a href="#">Help</a></li>
</ul>
</nav>
答案 0 :(得分:0)
您不需要在html id属性中添加#
。 #
仅用于CSS,以区分目标是哪个属性。
还请注意,您没有在处理程序中捕获正确的索引。您应该在某个时候使用this
。
答案 1 :(得分:0)
正如@mathk所说,在您的html正文中,将<ul id="#ul">
更改为<ul id="ul">
现在意识到,由于这是一个唯一的id,因此您实际上可以简化代码以使用document.getElementById
而不是document.querySelectorAll()
,并且必须遍历1个数组:
var a = document.getElementById("ul"); //instead of a = document.querySelectorAll("#ul")
然后,您只需直接对a
做任何事情即可。
答案 2 :(得分:0)
我试图复制和修改您的代码,这是您的错误;
html选择器:
您需要从#
中删除<ul id="#ul">
。
从ul找孩子
要从ul html组件获取子数组,您需要指定a[0].children
一个简单的console.log(a[0].children)
就会为您显示结果。
事件列表器
我建议您使用简单的JavaScript使用addEventListener
,例如a[i].addEventListener("click", function() {
更改“活跃的”孩子
当您使用addEventListener
时,您可以按onClick
定位调用this.classList
事件的对象,如下面的代码
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
ul {
display: flex;
flex-direction: row;
list-style: none;
align-items: center;
li {
margin-right: 1.875rem;
padding: 0 1rem;
font-size: 0.875rem;
text-align: center;
cursor: pointer;
a {
text-decoration: none;
color: black;
font-weight: bold;
}
&:hover {
border-bottom: 3px solid $orange;
}
}
}
.active {
background-color: gray;
border-bottom: 3px solid $orange;
}
</style>
</head>
<body>
<div class="container">
<ul id="ul">
<li class="li active"><a href="#">Home</a></li>
<li class="li" ><a href="#">Discover</a></li>
<li class="li"><a href="#">About us</a></li>
<li class="li"><a href="#">Contact</a></li>
<li class="li" ><a href="#">Help</a></li>
</ul>
</div>
<script type="text/javascript">
var a = document.querySelectorAll("#ul");
console.log(a[0].children)
console.log(a[0].children.length)
a = a[0].children
for (var i = 0; i < a.length; i++) {
a[i].addEventListener("click", function() {
var b = document.querySelector("li.active");
if (b) {
b.classList.remove("active");
}
this.classList.add("active");
})
}
</script>
</body>
</html>