JavaScript：在3个元素之间切换，只有一个处于活动状态

我刚开始学习JavaScript，有一个小问题。在我的网站上，我有三个div元素：

<div id="id_1" class="class_1" onclick="itemSelected('id_1')"></div>
<div id="id_2" class="class_2" onclick="itemSelected('id_2')"></div>
<div id="id_3" class="class_3" onclick="itemSelected('id_3')"></div>

到目前为止，这是可行的，用户单击一个项目，它会以另一种颜色高亮显示。如果他再次单击，它将获得默认的背景色。但一旦用户单击其他项目之一，它也会高亮显示。我想要的是单选功能：只要用户单击一个项目，另一个项目也会以默认背景色显示。有人能帮我解决这个问题吗

---

提前谢谢

为每个元素添加一个共享类

当用户单击某个元素时，使用该共享类将默认背景色设置为所有三个元素

---

然后使用元素的唯一ID为已单击的元素设置高亮显示的背景色。

您可以不使用javascript来完成此操作，为此创建了一个提琴：

我所做的是，通过设置

tabindex=“-1”

并使用css伪类

：focused

进行选择，使divs可聚焦

检查这是否符合您的要求。

<div id="id_1" class="class_0" onclick="itemSelected('id_1')"></div>
<div id="id_2" class="class_0" onclick="itemSelected('id_2')"></div>
<div id="id_3" class="class_0" onclick="itemSelected('id_3')"></div>

function itemSelected(element) {

 $('div.class_0').css({'background-color':'#99d4e5'});
document.getElementById(element).style.backgroundColor = "#f5b03d";

}

功能项已选定（元素）{
$（'div.class_0'）.css（{'background-color'：'99d4e5'}）；
document.getElementById（元素）.style.backgroundColor=“#f5b03d”；
}

---

如上所述更改html并使用此jquery

谢谢，这就是解决方案！工作完美。

<div id="id_1" class="class_0" onclick="itemSelected('id_1')"></div>
<div id="id_2" class="class_0" onclick="itemSelected('id_2')"></div>
<div id="id_3" class="class_0" onclick="itemSelected('id_3')"></div>

function itemSelected(element) {

 $('div.class_0').css({'background-color':'#99d4e5'});
document.getElementById(element).style.backgroundColor = "#f5b03d";

}