排他思想---点击当前按钮背景颜色变化

最新推荐文章于 2022-11-05 10:53:57 发布
最新推荐文章于 2022-11-05 10:53:57 发布
阅读量405 收藏 1
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/myunYao/p/8962458.html
版权

排他思想：清除所有的按钮的样式，只剩下自己。

代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
 7     <style>
 8         .current {
 9             background-color: pink;
10         }
11     </style>
12 </head>
13 <body>
14     <button class="current">按钮</button>
15     <button>按钮</button>
16     <button>按钮</button>
17     <button>按钮</button>
18     <button>按钮</button>
19     <button>按钮</button>
20 </body>
21 </html>
22 <script>
23     var $btn=$('button');
24     $btn.click(function(event) {
25         var $self=$(this);
26         // 排他思想：清除所有的按钮的样式  只剩下自己
27         $btn.removeClass('current');
28         $self.addClass('current');
29     });
30 </script>

效果展示如下：

转载于:https://www.cnblogs.com/myunYao/p/8962458.html

b474440171
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
鼠标悬浮改变背景颜色
weixin_45743799的博客
11-03 4926
将鼠标放在div上时div的背景颜色发生改变，把鼠标移走div之后，div的背景颜色回复原来的颜色。 效果图演示 没有将鼠标放在div上时（lanse） 将鼠标放在div上之后（变为红色） 下面看代码 由于代码较短，要认真观看了解呦。 <!DOCTYPE html> <html> <head lang="en"> <meta charset="...
JavaScript--【JS】排他思想
ZJie0的博客
03-06 432
排他思想 如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法 先找到所有的元素 消灭所有的元素样式，改成初始样式 然后留下自己，设置特定样式 注意：顺序不能颠倒，先消灭后自己 window.onload=function(){ // 【1】选择所有的相关元素 // .getElementsByTagName("li") var lis=document.querySelectorAll(".
javascript 利用排他思想创作点击按钮显示颜色
周百万的博客
05-08 764
代码不难主要是利用 排他思想：排除其他的元素的干扰 这是没利用排他思想，直接获取元素，注册事件，让他点击后获得背景颜色的改变 但是无法使盒子点击一次只显示一个，所以下面使用for循环来给盒子进行排他思想的设置 <body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button&g..
JS--排他算法
weixin_41812196的博客
08-02 213
1.所有元素清除样式 2.给当前元素设置样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1
js循环排他思想-点击按钮实现变色
qq_43162159的博客
04-13 699
<!-- 操作元素-排他思想 --> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button> <script> // 获取所有按钮元素 ...
排他思想点击切换背景图片
y18774585870的博客
12-06 390
点击切换背景图片 js var imgs = document.querySelector('.box1').querySelectorAll('img') console.log(imgs); for( var i = 0;i<imgs.length;i++){ imgs[i].onclick = function(){ // console.log(this.src); document.body.style.backgroundIma
DOM之排它思想
weixin_47075145的博客
07-15 206
当鼠标点击一个按钮时，该按钮背景颜色改变，其余按钮颜色不变；当鼠标点击另外一个按钮时，那个按钮背景颜色发生改变，其余按钮背景颜色恢复原样。（这里其余按钮背景颜色恢复原样，包括前面点击的变了色的按钮）同一组元素，某个元素要与其它元素之间形成与众不同，就会让它们变"普通"，而自己变"闪耀"，这就是排除他人，成就自己（假装这样理解0.0）01.给同组所有元素清除"闪光点"（利用循环）案例2排它思想之表格点击，点击表格，某一竖变为蓝色，其它变为白色。给所有元素绑定点击事件{案例排它思想之按钮点击。...
JS之排他思想
与优秀的你同在
05-10 4733
文章目录1. 什么是排他思想呢？2. 小案例 1. 什么是排他思想呢？ 如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法： 1.所有元素全部清除样式（干掉其他人） 2. 给当前元素设置样式 （留下我自己） 3. 注意顺序不能颠倒，首先干掉其他人，再设置自己 2. 小案例 我们通常会在浏览淘宝的时候会遇到选择商品属性， 选择一个后另选一个，第一个则会消失，这种效果就可以用排他思想来实现。 //简单使用几个按钮来实现 <button>按钮</butto
js中的排他思想
qq_46652181的博客
11-05 344
对排他思想提出属于自己的想法
JavaScript排他思想小例子之按钮的点击效果
小杨的博客
08-22 1214
排他思想(算法) 给一组相同的元素添加相同的事件，利用for循环来实现。 代码验证 按钮1 按钮2 按钮3 ...排他思想(算法) 给一组相同的元素添加相同的事件，利用for循环来实现。 代码验证 按钮1 按钮2 按钮3 ...排他思想(算法) 给一组相同的元素添加相同的事件
JavaScript 按钮排他思想
火星基地
10-24 501
要求： 有一系列按钮，要求每单击其中一个，该按钮改变样式（以背景颜色为例），其他按钮恢复保持默认样式。 实现思路： 获取所有按钮元素 首先先把其他按钮的背景颜色去掉 再单独设置自己的样式 代码实现： 仅展示<body></body>标签内的内容 <body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button
DOM学习Day5之排他思想
m0_50847715的博客
01-19 200
排他思想 首先排除其他人，然后才设置自己的样式。这种排除其他人的思想，我们称为排他思想 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title&gt
JavaScript如何实现按钮动态点击切换变色————排他思想，给你独一无二！
weixin_45533907的博客
08-01 927
HTML代码 <button>易烊千玺</button> <button>迪丽热巴</button> <button>上官卿言</button> <button>古力娜扎</button> <button>慕容云海</button> JavaScript代码 var btns = document.querySelectorAll('button'); for(var i = 0; i
排他思想（点击它时，只有它一个做效果）
DF_jie的博客
11-20 439
排他思想：排除其他元素，给自己添加效果（独享一份）； 例如： 先设置几个按钮，在写出JavaScript 显示效果； 实现效果：点击任何一个按钮，只有当前按钮显示效果（如：添加背景颜色） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal
修改Button的背景颜色
longyi_java的专栏
11-25 4455
在ButtionUI的方法public void paint(Graphics g, JComponent c)中调用drawXpButton（），可以设置Button的背景颜色     private void drawXpButton(Graphics g, AbstractButton b, Color c, boolean isRollover) { if(!b.isContentA...
js 简单的年龄计算器案例
yef_eng的博客
05-23 822
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>Document</title> </head> <body> <s...
点击按钮时改变按钮上字体的颜色
suiyuechenglao的博客
01-27 5116
-(void)layoutButton{     NSArray *buttonArr = @[@"推荐", @"分类", @"广播", @"榜单", @"主播"];     for (int i = 0; i5; i++) {         self.button = [UIButton buttonWithType:UIButtonTypeSystem];
Android开发技巧：给Button的点击上色
weixin_33963189的博客
07-30 2524
UI设计中，按钮一般都会有多个状态，比如：聚焦、点击等，不同的状态必须显示不同的呈现形式（比如颜色、形状的改变），这样用户才能感觉到按钮被成功选中、点击了，否则用户体验就会非常差了。本篇文章就简单地描述一下Android开发中，如何动态改变Button状态切换时的背景。Android的UI设计中，默认情况下，系统会为Button的点击实现一个默认的背景切换。例如下面这样的一个Button：&lt;...
vue中v-for中的排他思想
最新发布
06-07
在Vue中，v-for指令用于渲染列表，如果要实现v-for中的排他思想，可以通过以下几种方式来实现： 1. 使用computed属性过滤数据 可以使用computed属性对数据进行过滤，然后在v-for指令中使用过滤后的数据进行渲染。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值