通過點擊選擇項目更改背景

Question

我有一個問題 - 點擊它後可以更改項目的顏色/背景嗎？

讓我們有一個簡單的例子： 我們有兩個盒子，像是：

<a href="#" id="box1"></a> 
<a href="#" id="box2"></a> 

和三個帶班鏈接：紅色，黑色，藍色。是否可以先點擊其中一個框（選擇/激活它們），然後通過點擊正確的鏈接（帶有課程的那個鏈接）來更改它們的顏色？當我現在在這個簡單的例子中，我認爲它會更容易適應SVG圖形，我想在其上工作。

謝謝！

Answer 1

您可以使用jQuery來實現相同的功能。創建Plunker鏈接供您參考，如果這是你想要的。

Answer 2

你可以嘗試這樣的事情（假設jQuery的，雖然這可以用香草做的JavaScript以及）：

添加一個類你的每一個盒子：

<a href="#" id="box1" class="box">Box 1</a>

然後加入一個事件監聽器在點擊時將一個框標記爲「選中」。

$('.box').on('click', function() { 
    $('.selected').removeClass('selected'); 
    $(this).addClass('selected'); 
}); 

然後，如果你有一個顏色鏈接：

<a href="#" class="color-link" data-color="red">Red</a>

你可以把一個事件就可以了，像這樣：

$('.color-link').on('click', function() { 
    $('.selected').css('background', $(this).data('color')); 
}); 

哪些應該改變的背景CSS最後點擊的框爲你。