Question

我有两个按钮。单击一个时，我希望它从灰色变为黑色并保持黑色，除非页面刷新或单击另一个按钮。如果单击其他按钮，我希望它变为黑色，并且第一个按钮返回灰色。我认为JS是最好的方法，但我不知道该怎么做。

以下是我的一些代码：

HTML：

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

CSS：

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

非常感谢提前。

Answer 1

这是一个我没有使用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" />

Answer 2

不应重复使用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";
        };

Answer 3

使用jquery addClass函数添加具有设置背景的类。该课程将一直保留到页面加载为止。

CSS只有aproach是：active，但它不适用于按钮，因为一旦释放单击按钮，活动属性就会消失。也许使用伪装成按钮的标签可能会起作用，但一旦失去活动状态就会逐渐消失。

Answer 4

使用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>

Answer 5

<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>

Answer 6

有一个HTML button元素。因此，如果您想在页面上标记一个按钮，那么您真的应该使用：

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

以下是在javascript中使用<button>和classList的方法：

＆＃13;

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);
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 7

此时不需要JavaScript。在.css文件或html文件的“style”标签中使用此代码。当鼠标悬停在它上面并点击后，它将变为黑色。

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

如何在点击（Javascript）时更改按钮颜色？

7 个答案: