活动菜单选项卡

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

您不需要在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)会显示结果。
event lister我建议你在简单的javascript中使用addEventListener ，比如a[i].addEventListener("click", function() {
在使用addEventListener时更改“活动”子级 ，您可以通过this.classList定位调用onClick事件的对象，如下面的代码

 <!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 个解决方案

解决方案1
0 2019-05-09 08:15:44

解决方案2
0 2019-05-09 08:26:22

解决方案3
0 2019-05-09 09:02:01

活动菜单选项卡

问题描述

3 个解决方案

解决方案1 0 2019-05-09 08:15:44

解决方案2 0 2019-05-09 08:26:22

解决方案3 0 2019-05-09 09:02:01

解决方案1
0 2019-05-09 08:15:44

解决方案2
0 2019-05-09 08:26:22

解决方案3
0 2019-05-09 09:02:01