Javascript 单击DIV时需要更改其背景

我怎样才能做到以下几点：

我有几张唱片

<div style="background-color: black;">text1</div>
<div style="background-color: black;">text2</div>
<div style="background-color: black;">text3</div>
<div style="background-color: black;">text4</div>
<div style="background-color: black;">text5</div>
<div style="background-color: black;">text6</div>

text1
文本2
文本3
文本4
文本5
文本6

当有人用文本5单击DIV时，背景颜色需要更改为红色。 当同一个人用文本3单击DIV时，text5的背景色需要返回到黑色，而text3的背景色应该是红色。其他部门也是如此

因此，当有人点击另一个DIV时，背景颜色需要改变

---

用一个简单的javascript就可以做到这一点吗？

您需要在html中向div添加类，这样您就可以从javascript中访问它们，同时单击

onclick

，这样您就可以检测每个div被单击的时间。从

onclick

调用一个javascript函数，使用

this

将当前div作为参数传入

在javascript中的

changeColour

函数（从

onclick

调用）中，首先调用一个函数，通过使用

文档获取所有div的数组，将所有div设置回默认颜色。getElementsByClassName

，循环并重置颜色

完成后，代码执行回到

changeColour

函数中，更改单击的div的颜色（作为参数传入）

功能更改颜色（项目）
{
重置颜色（）；
item.style.backgroundColor='红色'；
}
函数resetcolor（）
{
var divsToReset=document.getElementsByClassName（“coloreddivs”）；
对于（var i=0；i

text1
文本2
文本3
文本4
文本5
text6

这里有一个使用

forEach（）

和

for

的解决方案

不在html结构中声明事件javascript

let div=document.queryselectoral（'div'）；
div.forEach（函数（div_当前）{
div_current.addEventListener（'click'，function（）{
对于（变量i=0；i
text1
文本2
文本3
文本4
文本5
text6
最好给你的标签一个propper类。
然后，您可以向这些元素添加事件，以根据需要作出反应


let tags=document.getElementsByClassName（'color-tag'）；
for（让document.getElementsByClassName（'color-tag'）的项）{
item.addEventListener（'click'，函数（）{
for（设i=0；i

text1
文本2
文本3
文本4
文本5
text6
一个父元素将使这更容易，并允许您隔离组件


document.querySelectorAll（'.wrapper'）.forEach（wrap=>{
wrap.addEventListener（'click'，e=>{
e、 target.parentNode.querySelectorAll（'div'）.forEach（div=>{
div.classList.remove（'selected'）；
});
e、 target.classList.add（'selected'）；
});
});
正文{
颜色：#FFF；
}
.选定{
背景：红色！重要；
}

文本1
文本2
文本3
文本4
文本5
文本6

文本1
文本2
文本3
文本4
文本5
文本6
您是否尝试过使用tabindex和focus伪类？您至少应该尝试编写代码。我同意使用类来指定背景颜色的方法，但在这种情况下，将样式也委托给类（毕竟，这是CSS类的主要目的）是有意义的，而不是将它们用作选择器。你可以看到一个例子来说明我的意思：@secan我同意。这是一种更加优雅的方式，非常适合风格、显示和功能的分离。