Javascript 如何使用jQuery向菜单项和子菜单项添加活动类

我是JS/jQuery新手，我试图在单击时将活动类添加到我的菜单项中，也添加到子菜单项中

$（文档）.ready（函数（）{
$（“#pag”）。单击（函数（）{
$（“span>label”）.removeClass（“activ”）；
$（此）.addClass（“活动”）；
});
});
.activ{
颜色：红色
}




Main1
subs 1

洛雷姆1

缅因州2

Sub2


洛雷姆2

代码的问题是您正在父级
ul
上添加事件处理程序。所以在
$（this.addClass（“activ”）这将指向UL而不是标签

您需要将事件附加到标签上

还有几个要点：


使用委托。在（eventName，handler）
上使用
，而不是
。单击
。这也适用于动态添加的元素
而不是
$（“span>标签”）。删除类（“activ”），do
$（“span>label.activ”）.removeClass（“activ”）。DOM操作非常昂贵。因此，只获取那些具有
activ
类的元素


以下是示例代码


$（文档）.ready（函数（）{
$（“#pag label.list group item”）。在（'click'，function（）上{
$（“span>label.activ”）.removeClass（“activ”）；
$（此）.addClass（“活动”）；
});
});
.activ{
颜色：红色
}




Main1

潜艇1


洛雷姆1

缅因州2

Sub2


洛雷姆2

所有
内部的内容都应该以
标签开始，修复您的代码下面的代码应该可以正常工作


$（文档）.ready（函数（）{
$（“#pag li”）。单击（函数（）{
$（this.parent（）.add（“li.activ”）.removeClass（“activ”）；
$（此）.addClass（“活动”）；
});
});
.activ{
颜色：红色
}




Main1

潜艇1



洛雷姆1


缅因州2

Sub2


洛雷姆2

问题是您正在向
$（this）
添加一个类，该类指向
ul
。更改代码，以便仅当
#pag

最后，
$（this.addClass（“activ”）$（'this'）
是实际点击的标签

下面是一个工作片段


$（文档）.ready（函数（）{
$（“#pag标签”）。单击（函数（）{
$（“pag标签”）.removeClass（“activ”）；
$（此）.addClass（“活动”）；
});
});
.activ{
颜色：红色
}




Main1
subs 1

洛雷姆1

缅因州2

Sub2


洛雷姆2

部分问题是因为您的HTML无效。只有
li
或
ol
元素可以是
ul