單擊 div 內的鏈接時更改 div 背景顏色

Question

所以我有這個實際上只是一個 div 的按鈕，我在 div 內有一個鏈接

<div id='button'>
    <a href='#'>Link</a>
</div>

當鏈接懸停在上面時，我可以使用 CSS 更改背景顏色。 但是，單擊鏈接時如何更改背景顏色？ 我相信這需要一些javascript？ 如果是這樣，你們能幫我處理 java 腳本嗎？ 這是我到目前為止提出的，但它仍然不起作用。

  <a href="/page/login" onmousedown="document.getElementById('button').backgroundColor='lavender'">login</a>

Answer 1

您也可以嘗試使用：

<div id='button'>
    <a href='#' onmousedown="this.parentNode.style.backgroundColor='lavender';">Link</a>
</div>

請注意，您可以使用相同的代碼而無需修改任何 Anchor 或其他元素，因為它將應用於任何父 object 。

Answer 2

onmousedown="document.getElementById('button').style.backgroundColor='lavender'"

Answer 3

我會用 JavaScript 和 CSS 來控制它。 以下示例將在每次單擊時切換按鈕的背景顏色。 這是通過將clicked的 class 添加到div或刪除它來完成的，如果 div 已經獲得了這個 class。

具有內聯 javascript 的 html 代碼：

<div id="button">
    <a href="#" onmousedown="javascript:(btn=document.getElementById('button')).className = (btn.className  == 'clicked') ? '' : 'clicked';">Link</a>
</div>

css：

#button {
    background-color: #ccc;
}

#button.clicked {
    background-Color: #123abc;
}