Question

我缺少该代码的错误吗？这应该可以，但是不能。我已经使用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>

Answer 1

您不需要在html id属性中添加#。 #仅用于CSS，以区分目标是哪个属性。

还请注意，您没有在处理程序中捕获正确的索引。您应该在某个时候使用this。

Answer 2

正如@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做任何事情即可。

Answer 3

我试图复制和修改您的代码，这是您的错误；

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>

活动菜单标签

3 个答案: