我用jquery点击功能改变按钮的背景颜色答案

【问题标题】：I change background color of button with jquery click function我用jquery点击功能改变按钮的背景颜色
【发布时间】：2015-01-23 10:42:04
【问题描述】：

我使用 jQuery click 函数更改按钮的背景颜色，但我想在没有 jQuery 的情况下执行此操作。我怎样才能只与 CSS 一起使用它？下面是我的代码和 jsfiddle 演示。

.colorButton{
    background: blue;
    color: white;
    cursor: pointer;
}

<div class="buttons">
    <button class="colorButton">Click me</button>
</div>

<script>
    $(document).ready(function () {
        $('.colorButton').click(function (){
            $(this).css("background","yellow");
        });
    });
</script>

http://jsfiddle.net/myyhs84b/

【问题讨论】：

点击和更改事件是 Javascript 的领域。 CSS 中没有等价物。
这是一个如此简单且重复的问题，以至于您使我们大多数人感到困惑，以至于您需要完全不同的东西

标签： javascript jquery html css frontend

【解决方案1】：

.colorButton{
    background:blue;
    color:white;
    cursor:pointer;
 }
.colorButton:focus{
    background:yellow;
}

&lt;button class="colorButton"&gt;Click me&lt;/button&gt;

[编辑] 好的，现在是纯 CSS

【讨论】：

【解决方案2】：

你可以用 CSS 做到这一点：

.colorButton:active, 
.colorButton:focus{
    background:yellow;
}

但在外部点击它保持不变。因为您必须添加一个新类或必须实现将内联样式应用于 DOM 元素的现有代码。

【讨论】：

【解决方案3】：

CSS 中的:focus 伪类用于设置当前被键盘定位或被鼠标激活的元素的样式。

CSS

.colorButton{
    background:blue;
    color:white;
    cursor:pointer;
}

.colorButton:focus{
    background: yellow;
}

HTML

<div class="buttons">
    <button class="colorButton">Click me</button>
</div>

小提琴here

仅供参考

focus

【讨论】：

【解决方案4】：

使用 checkbox/radio CSS hack，这可能是一个解决方案：{请不要，无论如何处理点击都应该在 javascript 中完成}

HTML：

<div class="buttons">
    <input id="rd_btn" type="radio" />
    <button class="colorButton">
        <label for="rd_btn">Click me</label>
    </button>
</div>

CSS：

.colorButton {
    background:blue;
    color:white;
    cursor:pointer;
}
.colorButton {
    padding: 0;
}
.colorButton label {
    display: block;
    padding: 2px;
}
#rd_btn {
    display: none;
}
#rd_btn:checked + button {
    background: yellow;
}

-jsFiddle-

【讨论】：

【解决方案5】：

由于 HTML 和 CSS 中没有点击事件，您可以使用伪类 :checked 的功能来更改某些内容。只需将标签设置为一些按钮，而不是在 jquery 中绑定一些点击功能。

看看这个例子： http://www.paulund.co.uk/create-flat-checkboxes

或者 :active 伪类。这里的例子： http://www.paulund.co.uk/create-a-css-3d-push-button

【讨论】：

【解决方案6】：

我认为你不能只使用 CSS 来做到这一点，因为没有像“clicked”属性这样的东西。

也许 :active 或 :hover 会满足您的需求。

.colorButton1:active
{
    background: green;
}

.colorButton2:hover
{
    background: blue;
}

http://jsfiddle.net/qbjsnp42/

【讨论】：

【解决方案7】：

您可以做的最接近的事情是使用 :active 或 :focus 但第一个只能在您按下按钮时起作用，而第二个只能在您不按其他任何位置时起作用

您可以在 CSS 中定义一个类，然后通过 JS 在点击时添加该类

【讨论】：