的Javascript：在點擊

這裏改變風格的元素是一些JavaScript我寫：的Javascript：在點擊

function toggle(clicked_id) { 

// Change last button back to light gray. 
if (typeof last_id !== 'undefined') { 
    document.getElementById(last_id).style.opacity = '.35'; 
} 

// Change current button to dark gray. 
document.getElementById(clicked_id).style.opacity = '1'; 

last_id = clicked_id; 
}

下面是HTML：

<div class="circle" onClick="toggle(this.id)" id="button1"></div> 
<div class="circle" onClick="toggle(this.id)" id="button2"></div> 
<div class="circle" onClick="toggle(this.id)" id="button3"></div>

而CSS：

.circle { 
    background: black; 
    width: .625em; 
    height: .625em; 
    border-radius: 50%; 
    margin-bottom: .35em; 
    opacity: .35; 
} 

.circle:hover { 
    opacity: 1; 
    cursor: pointer; 
}

有3個按鈕，每個「.35」的不透明度。懸停在按鈕上時，其不透明度變爲'1'。正如你所看到的，這部分是用CSS完成的。到現在爲止還挺好。我現在想要的是當點擊按鈕時，將按鈕的不透明度永久改變爲'1'。它應該保持這樣，直到我點擊另一個按鈕，此時它將返回到「.35」，並且新按鈕將處於「1」。

我試圖用Javascript來實現這一點，但我無法弄清楚爲什麼我的代碼不起作用。請看看我的JSFiddle。

P.S.我爲每個按鈕分配了一個特定的ID，但我寧願不在樣式表中定義這些ID。

來源

2013-12-09 Eduardo Buccianti

有沒有在你的jsfiddle –

到的jsfiddle的環節是jsfiddle.net，而不是你的代碼。 –

對不起，我已修復它。 –

我將創建一個新的不透明度爲1的CSS類，onClick更改被點擊的對象的類，並從該對象中除去.circle類。

來源

2013-12-09 11:37:37 developer82

謝謝，這是它！http://jsfiddle.net/5Hjk9/1/ –

事實上你的代碼工作，但的jsfiddle的配置是錯誤的：你需要選擇「不循環 - 在」在左邊的菜單，如果你想用JS內嵌樣式聲明事件就像你的toggle做功能：http://jsfiddle.net/d4yMB/2/

function toggle(clicked_id) { 

    // Change last button back to light gray. 
    if (typeof last_id !== 'undefined') { 
     document.getElementById(last_id).style.opacity = '.35'; 
    } 

    // Change current button to dark gray. 
    document.getElementById(clicked_id).style.opacity = '1'; 

    last_id = clicked_id; 
}

來源

2013-12-09 11:38:54 sdespont

仍然有一個問題。一個按鈕被點擊一次後，它永遠不會高亮懸停了。例如第一個按鈕，然後是第二個按鈕，現在當您懸停在第一個按鈕上時，它不會再高亮顯示。 –

的Javascript：在點擊

回答

相關問題