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

我刚刚开始使用JavaScript，并且有一个小问题。在我的网站，我有三个DIV元素：JavaScript：在3个元素之间切换，只有一个处于活动状态

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

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

在此先感谢！

来源

2013-04-03 Oinobareion

<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-03 10:23:02 Dolo

谢谢，这是解决方案！完美的作品。 – Oinobareion

为每个元素添加共享类。

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

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

来源

2013-04-03 10:07:49

你可以做到这一点不使用JavaScript，创造了该提琴： http://jsfiddle.net/6PUwz/

我所做的是，通过使用CSS-伪设置tabindex="-1"和做选择使得对焦的申报单级:focused。

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

来源

2013-04-03 10:17:14 user1983983

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

回答

相关问题