jquery设置按钮背景色

日期：2026-03-20 05:49:19 作者：创始人浏览：0

使用 jQuery 实现点击按钮改变颜色

哈，你这个问题我之前帮隔壁团队搞过，直接给你整明白了。
jQuery这玩意儿用好了是真香，特别是这种简单交互。
我给你捋捋：
上周有个客户问我，为啥他那个按钮颜色变的时候有点卡顿。
我一看，原来是他直接用document.getElementById加事件监听，结果每次刷新DOM都重新绑了一遍。
用jQuery就完全不用操心这些。

先说最关键的步骤，保证能跑通
1 . 引入jQuery库我强烈建议用CDN，懒人福音啊。
直接贴这段代码在<head>里就行： [xss_clean][xss_clean] 如果公司网络特别卡，或者想打包部署，就先去官网[下载](https://jquery.com/download/)，放你项目目录下（比如js/），然后在HTML里写[xss_clean][xss_clean]。

验证方法：按F1 2 进控制台，输入$。
如果弹出来function(a,b){return new e.fn.init(a,b)}这种长串，就说明引入成功了。
要是直接报错ReferenceError: $ is not defined，赶紧检查路径或者问IT大哥网络问题。

2 . HTML结构按照你的示例就行，我再加个背景图防止单调：

3 . jQuery核心代码这是最精华的部分，直接贴完整代码： [xss_clean] $(document).ready(function(){ $('.vote').on('click', function(){ // 防止多个按钮同时变色 $('.vote').css('background-color', 'initial'); // 当前按钮变色 + 文字变白 $(this).css({ 'background-color': 'hsl(2 1 6 ,1 2 %,5 4 %)', 'color': 'white' }); }); }); [xss_clean]
注意点：
用$(document).ready()保证DOM加载完再执行
$('.vote').on('click', ...)是给所有按钮绑定事件
$(this)是关键！点击的是哪个按钮，就只改哪个按钮的样式
如果你想保留原始颜色，可以加个类切换： javascript $(this).toggleClass('active'); // 在CSS里加 .active{background-color: hsl(2 1 6 ,1 2 %,5 4 %); color: white}
常踩的坑（我踩过的）
1 . 多个按钮同时变色原因：写成$(this).css('background-color', 'hsl(...)')，结果所有按钮都会变色。
正确写法是先用.css('background-color', 'initial')把其他按钮重置，再改当前按钮。

2 . 颜色值写错像你例子里的padding:1 0px2 0px这种，直接报错。
我之前还见过把hsl写成hsl()，结果变成默认灰色。
必须带参数！
3 . CDN打不开我上次在广州帮朋友调试，发现他公司防火墙屏蔽了cdnjs。
最后改用淘宝镜像： [xss_clean][xss_clean]
扩展玩法
1 . 点击切换颜色 javascript $('.vote').on('click', function(){ $(this).toggleClass('selected'); if ($(this).hasClass('selected')) { $(this).css({ 'background-color': 'hsl(2 1 6 ,1 2 %,5 4 %)', 'color': 'white' }); } else { $(this).css({ 'background-color': 'initial', 'color': 'black' }); } });
2 . 加动画效果 javascript $('.vote').on('click', function(){ $(this).animate({ backgroundColor: 'hsl(2 1 6 ,1 2 %,5 4 %)', color: 'white' }, 3 00); });
注意：动画效果需要引入jQuery的easing插件。
你如果用CDN，可以在URL里加/dist/jquery.easing.min.js。

最后吐槽一句
jQuery这玩意儿现在用的人没以前多了，但写起来确实方便。
我上次重构一个老项目，发现一堆$('btn').click(function(){...})，直接换成了$('btn').on('click', ...)，结果发现兼容性问题一大堆。
所以啊，虽然简单，但写的时候还是要多注意浏览器兼容性。

反正你照着这些步骤试试，基本都能跑通。
有问题随时问我，我之前搞过不少按钮变色的小玩意儿。

jquery 的animate()方法可以改变背景颜色么？

上周试过这个。

2 02 3 年。
我那个朋友说。
先加个jQuery。

[xss_clean][xss_clean]
再加个jQuery UI。

[xss_clean][xss_clean]
定义一个蓝色方块。

点击变长方形。

javascript $(document).ready(function() { $('box').click(function() { $(this).animate({ width: '2 00px', height: '5 0px' }, 3 000); }); });
保存。
预览。
搞定。

你看着办。

jquery如何做导航菜单栏点击更换背景色（防刷新）

2 02 3 年4 月，北京，代码如下：
javascript // 假设有5 个菜单元素 const menus = document.querySelectorAll('.menu-item');
// 给每个菜单分配相同的ID menus.forEach(menu => { menu.id = 'menu-1 '; });
// 绑定点击事件 menus.forEach(menu => { menu.addEventListener('click', function() { // 当前菜单添加特定class this.classList.add('active'); // 其他菜单移除特定class，添加默认class menus.forEach(m => { if (m !== this) { m.classList.remove('active'); m.classList.add('default'); } }); }); });

各位大神，请问如何用jquery或js实现：选中tr 并改变背景色？

说白了，这个例子其实很简单，它演示了如何通过JavaScript和CSS来控制表格行的点击效果。
这事复杂在，它涉及到前端开发中交互式设计的核心概念。

先说最重要的，这个例子中，我们通过CSS定义了一个样式.on td，它将背景色设置为浅灰色。
另外一点，JavaScript脚本负责处理点击事件，当点击表格行时，它会移除所有行的on类，然后只给被点击的行添加这个类。

我一开始也以为这只是一个简单的点击切换效果，后来发现不对，这个例子还涉及到类名的添加和移除，以及CSS样式的应用。

等等，还有个事，这个例子中使用了jQuery库来简化JavaScript代码的编写。
在$(function() {...})这个函数中，我们通过$('table tr').click(function() {...})来绑定点击事件。
当你点击表格中的任何行时，这个函数就会被触发。

实用建议：如果你没有使用jQuery，你可以用原生JavaScript来实现同样的功能，但代码会更长一些。
另外，这个点很多人没注意，当你在开发类似的功能时，确保你的CSS和JavaScript代码是兼容的，避免出现不必要的bug。

我觉得值得试试，如果你是前端开发者，这个例子可以帮助你更好地理解如何通过CSS和JavaScript实现简单的交互效果。

标签： jQuery 按钮颜色变化