點擊（Javascript）時如何更改按鈕顏色？

-5

我有兩個按鈕。點擊時，我希望它從灰色變成黑色，並保持黑色，除非頁面被刷新或另一個按鈕被點擊。如果另一個按鈕被點擊，我希望它變成黑色，並且第一個變成灰色。我認爲JS是最好的方式，但我不知道如何去做。點擊（Javascript）時如何更改按鈕顏色？

下面是我的一些下面的代碼：

HTML：

<a id="button"></a> 
<a id="button"></a>

CSS：

#button { 
display:inline-block; 
    height:10px; 
    width:10px; 
    border-radius:10px; 
    background-color:gray; 
}

提前非常感謝。

來源

2016-11-22 H3ll0

不要將相同的id分配給多個元素。這是課程的目的。 – Jecoms

一個ID在你的頁面上必須是唯一的 – gr3g

你試過了什麼？我在這裏沒有看到任何努力。 SO不是代碼寫入服務。此外，這種類型的功能已經覆蓋了數百萬次。 – hungerstar

ID名稱不應該被重複使用，將其更改爲一個類名來代替，但他們仍然需要一個唯一的ID名稱爲每個爲我們的Javascript邏輯應用到他們。

HTML：

<a id="button1" class="button"></a> 
<a id="button2" class="button"></a>

CSS：

.button 
      { 
       display:inline-block; 
       height:10px; 
       width:10px; 
       border-radius:10px; 
      }

的Javascript：

document.getElementById("button1").style.backgroundColor ="gray"; 
document.getElementById("button2").style.backgroundColor ="gray"; 


document.getElementById("button1").onclick = function(){ 
      this.style.backgroundColor ="black"; 
      document.getElementById("button2").style.backgroundColor ="gray"; 
     }; 

document.getElementById("button2").onclick = function(){ 
      this.style.backgroundColor ="black"; 
      document.getElementById("button1").style.backgroundColor ="gray"; 
     };

來源

2016-11-22 20:27:44 Hank

只有實際工作的答案，謝謝。我現在有一個問題，並希望你能幫我解決這個問題，事實上，當我點擊一個按鈕後，當鼠標懸停在按鈕上時，在懸停時不再有顏色變化。在我的腳本中也有：.button：hover {background-color：black;}。這在點擊按鈕之前有效，但只要單擊任一按鈕，就不會再有任何一個按鈕的懸停效果。 – H3ll0

使用jquery addClass函數添加具有設置背景的類。該類將一直保留，直到出現頁面加載。

CSS只有aproach是活動的，但它不會在按鈕上工作，因爲一旦您釋放點擊按鈕，活動屬性就會消失。也許使用僞裝成按鈕的標籤可能會起作用，但一旦失去活動狀態就會消失。

來源

2016-11-22 20:22:06 LordNeo

有了jQuery，你可以很容易地做到這一點。

$('#buttons .item').on("click",function(){ 
 
    $("#buttons .item.active").removeClass('active'); 
 
    $(this).addClass("active"); 
 
});

button{ 
 
    color: white; 
 
} 
 
.item{ 
 
    background-color: gray; 
 
} 
 
.active{ 
 
    background-color: black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="buttons"> 
 
    <button class="item">Button 1</button> 
 
    <button class="item">Button 2</button> 
 
    <button class="item">Button 3</button> 
 
</div>

來源

2016-11-22 20:23:46 TheValyreanGroup

這是我掀起了不帶JavaScript的一個例子 - 而不是我使用的佈置時尚，取決於哪一個是兩個單選按鈕「檢查」。

http://codepen.io/capitalq/pen/gLWLMK

.button { 
 
    -webkit-appearance: none; 
 
    appearance: none; 
 
    border: 0; 
 
    background: gray; 
 
    height: 50px; 
 
    width: 50px; 
 
    margin: 10px; 
 
    outline: none; 
 
    display: inline-block; 
 
    border-radius: 50%; 
 
} 
 

 
.button:checked { 
 
    background: black; 
 
}

<input type="radio" class="button" name="buttons" id="button1" /> 
 
<input type="radio" class="button" name="buttons" id="button2" />

來源

2016-11-22 20:23:58

好主意，直到你真的需要按鈕來工作。在這一點上，您需要'js'來進行按鈕操作或存儲活動狀態。我會想辦法做到不用'js'，因爲我喜歡你的挑戰。儘管如此，我還是想用+1來思考。 –

檢查出來。繼續思考開箱即可。起首。 –

<style media="screen"> 
    #buttonA, #buttonB { 
     display: inline-block; 
     height: 10px; 
     width: 10px; 
     border-radius: 10px; 
     background-color: gray; 
    } 
</style> 

<a id="buttonA"></a> 
<a id="buttonB"></a> 

<script type="text/javascript"> 

    var buttonA = document.querySelector('#buttonA'); 
    var buttonB = document.querySelector('#buttonB'); 

    var changeColour = function (e) { 

     if (e.target === buttonA) { 
      buttonA.style.backgroundColor = 'black'; 
      buttonB.style.backgroundColor = 'gray'; 
     } 

     if (e.target === buttonB) { 
      buttonB.style.backgroundColor = 'black'; 
      buttonA.style.backgroundColor = 'gray'; 
     } 

    }; 

    buttonA.addEventListener('click', changeColour, false); 
    buttonB.addEventListener('click', changeColour, false); 

</script>

來源

2016-11-22 20:28:33 JimmyBob

有一個HTML元素button。所以，如果你想標記你的頁面上的一個按鈕，你真的應該使用：

<button type="button"></button>

這裏使用<button>和classList的方法在javascript：

var buttons = document.getElementsByTagName('button'); 
 

 
function paintItBlack() { 
 

 
    for (var i = 0; i < buttons.length; i++) { 
 
    buttons[i].classList.remove('clicked'); 
 
    } 
 

 
    this.classList.add('clicked'); 
 
} 
 

 
for (var i = 0; i < buttons.length; i++) { 
 
    buttons[i].addEventListener('click',paintItBlack,false); 
 
}

.clicked { 
 
color: rgb(255,255,255); 
 
background-color: rgb(0,0,0); 
 
}

<button type="button">Button A</button> 
 
<button type="button">Button B</button>

來源

2016-11-22 20:40:25 Rounin

目前JavaScript不是必需的。在.css文件或html文件的「樣式」標籤中使用此代碼。當鼠標移過它並單擊後，它將變爲黑色。

a:hover 
    { 
     background-color:black; 
    } 
    a:target 
    { 
     background-color:black; 
    }

來源

2016-11-22 21:51:16

我想這隻適用於'按鈕'，不是所有的鏈接。我已經嘗試過，並且不起作用。根本沒有效果。 – H3ll0

將a更改爲#button .. –

點擊（Javascript）時如何更改按鈕顏色？

回答

相關問題