0

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

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

提前致谢！

4

3 回答 3

1

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

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

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

于 2013-04-03T10:07:49.543 回答
0

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

我所做的是，tabindex="-1"通过使用 css-pseudo-class 设置和进行选择，使 div 具有焦点:focused。

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

于 2013-04-03T10:17:14.420 回答
0 
<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

于 2013-04-03T10:23:02.080 回答