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個元素之間切換，只有一個處於活動狀態

回答

相關問題