更改按鈕顏色

我的想法是在按下按鈕後立即在地圖上顯示圖像。我想在點擊按鈕後改變按鈕的顏色，它應該保持這種顏色，直到我取消選擇按鈕。該按鈕的顏色應該變回原來的顏色。更改按鈕顏色

下面是按鈕的代碼：

<button type="button" class="Button" id="tram7" class="deselected"> Tramlinie 7 </button>

這裏是插入一張圖片到地圖的功能：

$('#tram7')[0].onclick = function() { 
    if (overlayTram7.getMap() == map) { 
     $('#tram7').addClass('deselected'); 
     overlayTram7.setMap(null); 
    } else { 
     $('#tram7').removeClass('deselected'); 
     overlayTram7.setMap(map); 
    } 
};

的風格改變了懸停工作，但我不不知道如何改變點擊按鈕的風格。

.Button { 
font-family: Calibri, sans-serif; 
font-size:13px; 
font-weight: bold; 
width: 160px; 
height: 25px; 
background:grey; 
color: white 
} 

.Button:hover { 
color: white; 
background:green 
}

在此先感謝。

來源

2014-04-04 user3498435

的Java =的Javascript –

「$（ '＃tram7'）[0]。」爲什麼？嘗試$（'＃tram7'）。on（'click'，function（）{//你的代碼在這裏}）; 你也可以提供一個jsfiddle.net演示 –

你的問題對我來說不太清楚。你想在用戶點擊按鈕時改變顏色嗎？如果是的話，那是很容易的，只需用CSS：

你會希望psuedo-selector，:active

.Button:active { 
    color: white; 
    background:green 
}

Here is an example

更新：你明確你想要的按鈕的顏色是點擊後更改。基本上就像一個切換。幸運的是jQuery有你一個簡單的解決方案：toggleClass()

Updated example using toggleClass()

來源

2014-04-04 14:28:26 EnigmaRM

不，我希望點擊後顏色保持不變。它應該保持其他顏色，直到我再次點擊按鈕。 – user3498435

查看我更新的示例，允許按鈕的類切換。 – EnigmaRM

如果我看演示，看起來這是我正在尋找的。但是，我不完全明白如何更改我的代碼。我是否刪除了「addClas」和「removeClass」函數，或者我應該只添加toggleClass？ – user3498435

使用toggleClass在點擊回調添加/刪除類將樣式化按鈕：

$('#tram7').toggleClass('clicked');

和類：

.Button.clicked { 
color: white; 
background:blue 
}

http://jsfiddle.net/5m9h6/1/

來源

2014-04-04 14:27:14 Finrod

感謝您的幫助，但這不是我所期待的。使用主動功能時，顏色僅在點擊按鈕時發生變化。但我希望按鈕保持新顏色，直到再次單擊按鈕 – user3498435

我編輯了我的答案以適合您的需求。希望它現在:) – Finrod

的:active僞選擇應該是你要找的東西

.Button:active { 
color: white; 
background:red; 
}

來源

2014-04-04 14:27:20 Greg

感謝您的幫助，但這不是我所期待的。使用主動功能時，顏色僅在點擊按鈕時發生變化。但我希望按鈕保持新的顏色，直到再次點擊按鈕。 – user3498435

更改按鈕顏色

回答

相關問題