Javascript 使用Java脚本更改单击时列表项的颜色

由于我是Java脚本新手，我需要知道如何使用Java脚本更改列表项的颜色或样式

例如，我的HTML文件中有以下无序列表：

<ul id="list">
   <li>Text1</li>
   <li>Text2</li>
   <li>Text3</li>
   <li>Text4</li>
</ul>

文本1
文本2
文本3
文本4

现在，当我单击项目时，它应该更改颜色，当单击下一个项目时，它将保留上一个项目的新颜色，并更改新单击项目的颜色（下面的示例屏幕截图）：

---

下面是实现这一点的jquery代码

    $('li').click(function(){
$(this).css('background-color','red');
})

---

下面是实现这一点的jquery代码

    $('li').click(function(){
$(this).css('background-color','red');
})

用于将事件侦听器函数绑定到元素

//查找所有
元素
var listItems=document.querySelectorAll（“#list li”）；
//迭代
元素
forEach（函数（listItem）{
//为每个
元素调用此函数
listItem.addEventListener（'click'，函数（）{
//单击列表项后，立即将其颜色更改为红色
this.style.color='red'；
});
});

文本1
文本2
文本3
文本4
用于将事件侦听器函数绑定到元素


//查找所有
元素
var listItems=document.querySelectorAll（“#list li”）；
//迭代
元素
forEach（函数（listItem）{
//为每个
元素调用此函数
listItem.addEventListener（'click'，函数（）{
//单击列表项后，立即将其颜色更改为红色
this.style.color='red'；
});
});

文本1
文本2
文本3
文本4
尝试以下解决方案。这也将切换单击


var ul=document.getElementById（“列表”）；
var listItems=ul.getElementsByTagName（“li”）；
对于（列表项的li）{
li.addEventListener（'click'，function（））{
if（this.classList.contains（'active'））{
此.classList.remove（“活动”）；
}否则{
this.classList.add（“活动”）；
}
})
}
.active{
颜色：红色；
}

文本1
文本2
文本3
文本4
尝试以下解决方案。这也将切换单击


var ul=document.getElementById（“列表”）；
var listItems=ul.getElementsByTagName（“li”）；
对于（列表项的li）{
li.addEventListener（'click'，function（））{
if（this.classList.contains（'active'））{
此.classList.remove（“活动”）；
}否则{
this.classList.add（“活动”）；
}
})
}
.active{
颜色：红色；
}

文本1
文本2
文本3
文本4

编辑：所有建议jQuery的人都疯狂地导入整个库，只是为了做一件小事

编辑：所有建议jQuery的人都疯狂地导入整个库，只是为了做一件小事
在每次单击元素时添加/删除颜色

这是工作小提琴


html


文本1
文本2
文本3
文本4


Jquery脚本

<script>
        $(document).ready(function() {
$('li').click(function(event) {
    $(this).toggleClass('red');
});
});//end doc ready
    </script>


$（文档）.ready（函数（）{
$（'li'）。单击（函数（事件）{
$（this.toggleClass（'red'）；
});
});//结束文件准备就绪

CSS


瑞德先生{
颜色：红色；
}
每次单击元素时添加/删除颜色

这是工作小提琴


html


文本1
文本2
文本3
文本4


Jquery脚本

<script>
        $(document).ready(function() {
$('li').click(function(event) {
    $(this).toggleClass('red');
});
});//end doc ready
    </script>


$（文档）.ready（函数（）{
$（'li'）。单击（函数（事件）{
$（this.toggleClass（'red'）；
});
});//结束文件准备就绪

CSS


瑞德先生{
颜色：红色；
}
jQuery将使这变得相当容易，您可以循环到that@BasPauw为什么不呢？只需要4行代码。这个问题在这个网站上被问了很多。请尝试查找其他用户已经回答的一些问题。如果你遇到了无法通过搜索此网站或web解决的问题，请立即询问@MuthuKumaran我想我被jQuery的懒散黑客行为宠坏了，甚至不能用常规javascript思考问题anymore@BasPauw现在是摆脱jQuery的时候了。jQuery将使这变得相当容易，您可以循环到that@BasPauw为什么不呢？只需要4行代码。这个问题在这个网站上被问了很多。请尝试查找其他用户已经回答的一些问题。如果你遇到了无法通过搜索此网站或web解决的问题，请立即询问@MuthuKumaran我想我被jQuery的懒散黑客行为宠坏了，甚至不能用常规javascript思考问题anymore@BasPauw是时候摆脱jQuery了。如果没有标记，就不要使用jQuery。如果没有标记，就不要使用jQuery。
<style>
    .red{
        color: red;
    }
</style>