jquery+点击按钮变色

jQuery 是一种广泛使用的 JavaScript 库，可以轻松为网页添加交互性和动态效果。其中一个常见的应用场景就是点击按钮可变色，接下来我们就来通过 jQuery 实现这个功能。

$(document).ready(function() {
// 找到按钮并添加 click 事件$('#button').click(function() {
    // 切换按钮的类名$(this).toggleClass('active');
}
    );
}
    );

以上代码中，我们首先通过 ready() 方法确保 DOM 加载完成后才会执行函数。然后使用 click() 方法找到按钮元素并添加点击事件。在点击事件中，我们使用 toggleClass() 方法对按钮的类名进行切换，从而实现颜色的变化。

接下来就是 CSS 样式的编写，我们可以定义两个不同的类名，一个用于正常的状态，一个用于变色后的状态。然后在点击事件中切换类名即可。

下面是一个简单的 CSS 样式示例：

.button {
    padding: 10px;
    background-color: #eee;
    border-radius: 5px;
}
.active {
    background-color: #ffa500;
    color: #fff;
}
    

以上就是使用 jQuery 实现点击按钮变色的简单示例。希望能对你有所帮助。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！