Javascript 单击列表项时如何添加活动/非活动类？

单击后的预期结果

click (data-pos="A") add class active
click (data-pos="B") add class inactive

Text1
Text2

我该怎么做？使用

JavaScript

纯JavaScript解决方案 为所有li元素提供一个等待单击事件的事件侦听器。 JQuerys函数

closest（）

在这里非常有用。因为在这个解决方案中，我们分配给nextSibling或previousSibling，我们总是要检查nextSibling是否存在，以确定它是第一个还是第二个列表元素

我们有三种情况：

初始无活动或非活动类函数中的其他部分

我们单击的元素的类处于活动状态

我们单击的元素的类处于非活动状态

在初始单击时，为单击的元素指定类为active，为另一个元素指定类为inactive。 然后检查被单击的元素是否有类活动，将其删除并将其添加到类列表中。在另一个元素中，从其类列表中删除inactive并添加active，反之亦然。
注意：检查是下一个元素还是上一个元素很重要

document.querySelectorAll（'li'）.forEach（（x）=>{
x、 addEventListener（“单击”，myFunction）；
})
函数myFunction（）{
if（this.classList.contains（'active'））{
this.classList.remove（'active'）
this.classList.add（'inactive'）
if（this.nextElementSibling==null | | this.nextElementSibling==未定义）{
this.previousElementSibling.classList.remove（'inactive'）；
this.previousElementSibling.classList.add（'active'）；
}否则{
this.nextElementSibling.classList.remove（'inactive'）；
this.nextElementSibling.classList.add（'active'）；
}
}else if（this.classList.contains（'inactive'））{
this.classList.remove（'inactive'）
this.classList.add（'active'）
if（this.nextElementSibling==null | | this.nextElementSibling==未定义）{
this.previousElementSibling.classList.remove（'active'）；
this.previousElementSibling.classList.add（'inactive'）；
}否则{
this.nextElementSibling.classList.remove（'active'）；
this.nextElementSibling.classList.add（'inactive'）；
}
}否则{
this.classList.add（'active'）
if（this.nextElementSibling==null | | this.nextElementSibling==未定义）{
this.previousElementSibling.classList.add（'inactive'）；
}否则{
this.nextElementSibling.classList.add（'inactive'）；
}
}
}

.active{
背景颜色：黄色；
}
.不活跃{
背景颜色：粉红色；
}

Text1
Text2

这个怎么样

var myList=document.getElementById（'myList'））
/*我们将把点击监听器添加到父元素
中*/
myList.addEventListener（'click'，e=>{
/*创建一个循环并迭代#myList中的所有
元素*/
for（var i=0；i与我们单击的元素（如target）匹配，
将活动类附加到它
*/
li.classList.add（'active'）
}否则{
/*. */
li.classList.remove（'active'）
}
}
})

.active{
颜色：黄色；
背景：红色；
}

项目#1
项目#2
项目#3

不是必需的，但是如果您想使用它，这里有一个解决方案：

$（“li”）。单击（函数（）{
$（'#myList li'）.removeClass（'active-inactive'）；
$（'#myList li'）.addClass（'inactive'）；
$（此）.removeClass（“非活动”）；
$（此）.addClass（“活动”）；
});
/*仅用于样式目的*/
.主动{
颜色：蓝色；
背景色：#E3F2FD；
}


Text1
Text2
Text3
这是否回答了您的问题？请通过以下方式澄清您的问题：您点击了哪些项目以获得预期结果：仅文本1还是文本2？初始状态之后是哪个类（既不是活动的也不是非活动的）？否此解决方案没有JQuery@hc_dev是的，我没有意识到这一点。我的四行CSS代码片段需要直观地显示程序是如何运行的。2.我嵌入了一把可运行的小提琴。3. 
forEach
位于IE11中的
NodeList
s上。您的评论添加了有价值的信息，尤其是#3。在遗憾中#2：对不起，手机没有显示fiddle@hc_dev谢谢你的推荐
click (data-pos="A") add class active
click (data-pos="B") add class inactive

<ul id="myList">
   <li class="top active"   data-pos="A">Text1</li>
   <li class="top inactive" data-pos="B">Text2</li>
</ul>