活动菜单标签

时间:2019-05-09 08:10:41

标签: javascript

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

3 个答案:

答案 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)

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

  1. html选择器: 您需要从#中删除<ul id="#ul">

  2. 从ul找孩子 要从ul html组件获取子数组,您需要指定a[0].children 一个简单的console.log(a[0].children)就会为您显示结果。

  3. 事件列表器 我建议您使用简单的JavaScript使用addEventListener,例如a[i].addEventListener("click", function() {

  4. 更改“活跃的”孩子 当您使用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>