jQuery实现简单的按钮颜色变化

2025-09-25 21:23:19

在HTML和CSS中我们想要完成一个对按钮颜色的设置，虽然也可以做到想要的效果，但过程比较繁琐，利用jQuery我们就可以轻松的完成这件事情。

假设现在我们有一组按钮

当我们点击其中一个的时候让它变成粉色，再点击另一个后除了被点击的按钮全部为原始颜色，我们应该怎样做呢

其实只需要简单的几行代码即可完成

<script>
 $(function(){
  $('Button').click(function(){
             //先设置点击的按钮颜色变为粉色
   $(this).css('background','pink');
             //再设置除了当前元素的其他兄弟元素的颜色为“空”
             //siblings是选中当前元素的所有兄弟元素（除去当前元素）
   $(this).siblings('button').css('background','');
  });
 });

</script>

效果如下：

下面是完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>Wellfancy</title>
   <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <style>
 div{
   border: 2px solid lightpink;
            margin: 50px auto;
            padding:50px ;
        }
    </style>

</head>

<body>
 <div>
  <button>选项1</button>
  <button>选项2</button>
  <button>选项3</button>
  <button>选项4</button>
  <button>选项5</button>
  <button>选项6</button>
  <button>选项7</button>
 </div>
 <script>
 $(function(){
  $('Button').click(function(){
   $(this).css('background','pink');
   $(this).siblings('button').css('background','');
  });
 });
     </script>

</body>

</html>

可以看到，当我们使用jQuery时是不是比只用css要简单得多呢？我们可以利用更简短的代码完成更复杂的操作。

jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果

复制代码代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动</title> <meta name="description" cont
基于jquery插件制作左右按钮与标题文字图片切换效果

本例用了2个js文件jquery-ui-1.8.6.core.widget.js和jqueryui.bannerize.js,到演示页面可以查看 CSS Code 复制代码代码如下: <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} /* ui-banner */ .ui-banner{display:block;position:relative;wi
jquery实现点击左右按钮切换图片

本文实例为大家分享了jquery点击左右按钮切换图片的具体代码,供大家参考,具体内容如下当点击了右边的按钮后,图片向左移动,同理左边按钮. css样式此处省略......直接进入到js代码中 <div class="down-down-div"> <div class="pics-frame"> <div class="frame-first">  <div id
jquery带有索引按钮且自动轮播切换特效代码分享

本文实例讲述了jquery带有索引按钮且自动轮播切换特效.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的带有索引按钮且自动轮播切换特效代码,实现过程很简单. 运行效果图: -------------------查看效果下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 在head区域引入CSS样式: <link rel="stylesheet" hr
Jquery幻灯片特效代码分享--鼠标滑过按钮时切换（2）

这篇文章主要介绍了jQuery实现幻灯片焦点图,可实现非常炫目时尚的幻灯片效果,非常具有实用价值,基本能满足你在网页上使用幻灯片(焦点图)效果,具体如下幻灯片效果描述:用鼠标滑过右下角数字按钮幻灯片进行左右切换进行切换. 自定义切换参数效果:向下切换.切换时间为8秒.鼠标滑过按钮时切换运行效果截图如下: 具体代码如下 <head> <title>Jquery幻灯片焦点图插件</title> <script src="js/jquery-1.4a2
Jquery幻灯片特效代码分享--鼠标点击按钮时切换（1）

本文实例讲述了jQuery实现时尚漂亮的幻灯片特效,基本能满足你在网页上使用幻灯片(焦点图)效果.分享给大家供大家参考.具体如下: 幻灯片效果描述:用鼠标点击右下角数字按钮幻灯片进行左右切换进行切换. 运行效果截图如下: 具体实现代码: <head> <title>Jquery幻灯片焦点图插件</title> <script src="js/jquery-1.4a2.min.js" type="text/javascript&qu
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换

已经有两年多没登陆csdn账号了,中间做了些旁的事,可是现在却还是回归程序,但改做前端了,虽然很多东西都已忘得差不多了,但还是应该摆正心态,慢慢来,在前端漫游,做一只快乐双鱼. 路是一步一步走出来的,知识是一点一滴积累的,记录是笔财富,来吧,一起学着总结做笔记. 这几天在写后台文章的一些页面,为了能得到更好的交互性,需要做一些效果,js无疑使不二之选,但由于浏览器的兼容性一直差强人意,所以选用jquery框架,通过css样式.dom节点以及自身所带函数就可以实现比较好的用户体验,此案例有三个功能
使用jQuery实现鼠标点击左右按钮滑动切换

使用jQuery实现点击左右滑动切换特效: HTML代码如下:  <div class="warp">  <div class="divContent"> <div class="content"> <ul class="contentUl"> <li> <img src="
基于jquery实现左右按钮点击的图片切换效果

jQuery可以制作出与Flash媲美的动画效果,这点绝对毋庸置疑,本文将通过实例演示一个左右按钮点击的图片切换效果. 一.最终效果二.功能分析 1.需求分析点击左边pre按钮,显示前面三个图片,点击右边的next按钮,显示后面的一组(三个)图片.初始化只显示next按钮,到最后一组只显示pre按钮,中间过程两按钮都显示. 2.html结构分析 <div class="activity" id="activity-slide"> <a href
jQuery实现简单的按钮颜色变化

在HTML和CSS中我们想要完成一个对按钮颜色的设置,虽然也可以做到想要的效果,但过程比较繁琐,利用jQuery我们就可以轻松的完成这件事情. 假设现在我们有一组按钮当我们点击其中一个的时候让它变成粉色,再点击另一个后除了被点击的按钮全部为原始颜色,我们应该怎样做呢其实只需要简单的几行代码即可完成 <script> $(function(){ $('Button').click(function(){ //先设置点击的按钮颜色变为粉色 $(this).css('background','p
Android编程实现简单设置按钮颜色的方法

本文实例讲述了Android编程实现简单设置按钮颜色的方法.分享给大家供大家参考,具体如下: 1.工程目录 a.在res目录-新建drawble文件夹放入自定义图片 2.main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:Android="http://schemas.android.com/apk/res/android" android:or
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例

Jquery 实现表格颜色交替变化,点击选中行,鼠标移过颜色变化效果图如下: 源码(Demo)打包下载 html代码如下: 复制代码代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http:/
基于jQuery实现的文字按钮表单特效整理

1.jQuery幻灯片按钮控制图片过渡特效基于jQuery实现的幻灯片按钮控制图片过渡特效源码,共有4幅图片进行自动切换,且切换时有幻灯片过度的效果.用户还可自定义幻灯片的标题文字和内容.是一款非常优秀的特效源码. 在线演示源码下载 2.htm5+CSS3实现的表单美化带输入验证特效纯html5+css3实现的表单美化效果,以及具有输入验证特效的代码,此种特效在网站非常实用. 在线演示源码下载 3.jquery制作的带有遮罩弹出层实现登录注册等表单实现了点击后在原始页面上弹出想用页面的
浅谈layer弹出层按钮颜色修改方法

layer弹出层有多种格式的弹出,使用方法也不细述. 在弹出确认框可使用confirm或open方式在open中 layer.open({ content: '确认提交?', btn: ["确认", "取消"], yes: function (index) { somefunciton... layer.close(index) }, btn2: function (index) { } }); layer中确认按钮在第一个位置,展示也是按顺序展示如果和自己项目
JQuery实现简单的复选框树形结构图示例【附源码下载】

本文实例讲述了JQuery实现简单的复选框树形结构图.分享给大家供大家参考,具体如下: 这是自己写的简单树形结构图,实现的功能有: 1.最左边的按钮实现子目录的隐藏和显示 2.点击父节点的复选框选中后,父节点下的所有的子节点也选中:父节点未选中,则下面的所有的子节点也取消选中(全选和全不选) 3.选中一个子节点时相应的父节点也选中:当所有的子节点都没有选中时,父节点也取消选中这是实现的最简单的功能.下面来具体的谈谈具体的实现: 1.引入库所有的这些操作都是通过JQuery来实现的,所以首先要
Javaweb 鼠标移入移出表格颜色变化的实现

最近在学习JavaWeb时,有用到鼠标移动事件,所以今天在这里记录一个相关的案例,同时也是对相关知识的一个巩固,效果为在鼠标移动到表格对应行列时,该行列的背景颜色发生变化. 效果如下: 其中用到是onmouseover和onmouseou事件t,同时还有一个作用相似的事件叫做onmousemove,所以在这里先对这三种鼠标事件做一个简单的对比: 在时间上:如果两个事件同时存在,先是onmousemove事件触发后,才会触发onmouseover事件. 在按钮上:onmousemove和onmou
jQuery实现简单计算器

本文实例为大家分享了jQuery实现简单计算器的具体代码,供大家参考,具体内容如下基本功能: 1.计算器换肤,目前有白色(默认色).绿色.蓝色.灰色.橙色几种颜色可供选择. 2.简单的加.减.乘.除.取余计算,注意由于时间有限,没有深入研究功能,每次运算后需点击清屏功能才能进行下一次正确的运算. 3.历史运算数据记录,此功能需要点击记录按钮后打开浏览器控制台查看. 4.退出功能,点击退出按钮,可实现计算器退出. 功能截图: 1.换肤(当前肤色为灰色).计算. 2.历史运算记录. 3.退出. 代
Jquery实现简单的轮播效果(代码管用)

废话不多说了,直接给大家贴jquery代码了,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/index.css"> <script
jQuery实现简单的计时器功能实例分析

本文实例讲述了jQuery实现简单的计时器功能.分享给大家供大家参考,具体如下: 在写项目的过程中遇到要前端60秒发送验证码的业务需求,于是用到计时器的功能: setInterval(function xxx(){ //业务逻辑 },隔多少时间执行一次) 60秒计时思路: 1.设置秒数:60s 2.设置内容:实时改变,秒数+内容 3.结束后:去掉按钮的disable,内容恢复原来样子 //计时器60秒 function timeInterval(){ $("#code_send_btn"

jQuery实现简单的按钮颜色变化

相关推荐

随机推荐