javascript - 事件菜单选项卡

Question

我缺少的这段代码是否有错误？这应该有效，但事实并非如此。我已经使用 JavaScript 和 jQuery 尝试了所有不同的版本，看起来它并不针对列表元素。

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

正如@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直接。