Question

假设我有10个红色按钮。我希望他们在点击后将颜色更改为蓝色，无论我在哪里点击之后都保持蓝色。现在我使用：active和它的功能，它只会为最近点击的按钮变换颜色，并在点击其他任何内容后返回原始颜色。

但我希望页面上所有点击的按钮都变为更改的颜色。我该怎么做？

Answer 1

您可以使用jQuery这样做：

＆＃13;

$(function() {
  $('button').click(function() {
    $(this).addClass('blue');  
  });
});

＆＃13;

button {
  color:red;
}
  button.blue {
    color:blue;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click Me</button>
<button>Click Me</button>
<button>Click Me</button>
<button>Click Me</button>
<button>Click Me</button>
<button>Click Me</button>
<button>Click Me</button>
<button>Click Me</button>
<button>Click Me</button>
<button>Click Me</button>

＆＃13;

Answer 2

要在CSS中实现这一点，您需要使用一些涉及transition-delay属性的技巧;在按钮的正常状态下，将其设置为一个非常高的数字，然后在按钮的活动状态下将其重置为0s。

button{
    background:red;
    transition:background .25s linear 999999s;
}
button:active{
    background:blue;
    transition-delay:0s,
}

使多个单击按钮更改颜色

2 个答案: