Question

我刚开始使用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>

我添加了以下脚本以突出显示用户点击的脚本：

var selected = false;

function itemSelected(element) {

    if (selected == false) {
        document.getElementById(element).style.backgroundColor = "#f5b03d";
        selected = true;
    }
    else {
        document.getElementById(element).style.backgroundColor = "#99d4e5";
        selected = false;
    }
}

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

提前致谢！

Answer 1

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

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

然后使用元素的唯一ID将突出显示的背景颜色设置为已单击的元素。

Answer 2

您可以在不使用javascript的情况下执行此操作，为此创建了一个小提琴： http://jsfiddle.net/6PUwz/

我所做的是通过设置tabindex="-1"并通过使用css-pseudo-class :focused进行选择来使div成为焦点。

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

Answer 3

<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";

}

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

JavaScript：在3个元素之间切换，只有一个是活动的

3 个答案: