点击按钮比变色，点击其他变色，其他恢复默认（$.each（）函数增加CSS，移除CSS）

最新推荐文章于 2022-08-19 00:08:26 发布
最新推荐文章于 2022-08-19 00:08:26 发布
阅读量1.4k 收藏 2
点赞数
分类专栏： 前端代码 文章标签： html css js Jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mr_ccup/article/details/85613523
版权 
<!DOCTYPE html>
<html>
<head>
  <title>userInformation.html</title>
  <meta name="keywords" content="keyword1,keyword2,keyword3">
  <meta name="description" content="this is my page">
  <meta name="content-type" content="text/html; charset=UTF-8">
  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
  <style type="text/css">
  .hq_hy:hover, .hq_zsh:hover, .hq_hb:hover, .hq_jyyc:hover, .hq_byb:hover, .hq_lrcl:hover//鼠标移上去变色（不点击）
   {
    color: #fff;
    border-color: #b1b0b0;
    background: #b1b0b0;
    border: none;
   }
   .start
   {
    cursor: pointer;//改变鼠标样式为手指
   }
   .end
   {
    cursor: pointer;//改变鼠标样式为手指
    color: #fff;
    background: #b1b0b0;
    border: none;
   }
  </style>
</head>
<body>
  <table> 
    <tr>
       <td>
          <input class="flag hq_hy" type="submit" onclick="dj(this);" value="第一个" />
       </td>
       <td>
          <input class="flag hq_zsh" type="submit" onclick="dj(this);" value="第二个" />
       </td>
       <td>
          <input class="flag hq_hb" type="submit" onclick="dj(this);" value="第三个" />
       </td>
       <td>
         <input class="flag hq_jyyc" type="submit" onclick="dj(this);" value="第四个" />
       </td>
       <td>
         <input class="flag hq_byb" type="submit" onclick="dj(this);" value="第五个" />
       </td>
       <td>
         <input class="flag hq_lrcl" type="submit" style="" onclick="dj(this);" value="第六个"
              />
       </td>
    </tr>
  </table>
                                  

</body>
                                

<script type="text/javascript">
                                  

$(function () {
  //加载事件
   var collection = $(".flag");
   $.each(collection, function () {
       $(this).addClass("start");
     });
   });
  //单击事件
function dj(dom) {
   var collection = $(".flag");
   $.each(collection, function () {
       $(this).removeClass("end");
   //            $(this).addClass("start");
       });
   //        $(dom).removeClass("start");
       $(dom).addClass("end");
  }
                              
  </script>
</html>
Mr_ccup
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
按钮点击改变颜色
sunyiuhang的博客
09-09 187
<span v-for="(item,i) in sheetLists" :key="i" @click="sheetClick(i)" style="margin-right:10px" :class="{'sheets-active': sheetActive===i }"> {{item}}</span> sheetClick(i){ this.sheetActive=i },
css 点击按钮，切换颜色
最新发布
qq_38260470的博客
05-07 433
【代码】css 点击按钮，切换颜色。
点击按钮改变按钮的颜色,并且页面会根据值,显示对应的颜色(类似开关按钮:开为绿色,关为红色)
qq_46239275的博客
07-02 3299
根据后端数据设置按钮的颜色, 并且点击按钮改变按钮的颜色(以button为开关按钮为例) 首先说明 button 按钮的值是后端数据 <!-- 1、item.devicePower是按钮的值[如果是表格的话则按钮的值是(scope.row.对应的值)] 2、这里我的button值是两个值 3、按钮的值 开:on,背景色为green 关:off,背景色为red 字体色或者图标色为white --> <el-button :style="{background:[item
button点击后变色_HTML | 两只“变色龙”带你玩转色彩变幻
weixin_33800724的博客
12-25 1666
许多小伙伴觉得上次“技术贴”的密码锁比较晦涩难懂，那么这一次小编来带领大家领略更简单有趣的JS和html！颜色是我们生活最不可或缺的部分，每天睁开双眼第一件事就是感知光与颜色的存在，这次小编设置了两个简单的按钮，通过点击可使背景发生颜色的变化，每一次颜色变化都是漂亮美丽的渐变色。(变色龙一号 / 变色龙二号)点击变色龙二号则会使变色龙一号发现渐变色反应，而他的原理也是十分简单：oncli...
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
10-22
在插件内部，我们首先使用`$.extend()`函数合并默认配置和用户自定义的配置，然后遍历每个表格元素，为偶数行和奇数行添加对应的样式类。接着，我们为表格的每一行绑定`mouseover`和`mouseout`事件，当鼠标悬停在某...
鼠标移到导航当前位置的LI变色处于选中状态
09-05
`mouseout`事件处理函数是为了在鼠标离开当前列表项时保持变色状态，但这里其实没有必要，因为`mouseover`已经在其他列表项上重新设置了`h_nav_over`类。 ```javascript $("#nav>ul>li").mouseover(function() { $...
jQuery实现鼠标滑过鼠标变色功能
06-10
例如，可以在CSS文件中定义一个类，如`.highlight`，并在JavaScript中添加和移除这个类，而不是直接设置背景颜色： ```css .highlight { background-color: blue; } ``` ```javascript // JavaScript $(this)....
jquery制作的超酷动态变色sitemap呈现树状结构的网站地图效果.zip
11-01
6. **CSS样式和类管理**：为了实现变色效果，开发者可能使用CSS定义节点的各种状态，如 hover 、active 等，并使用jQuery添加或移除类来改变元素的样式。 7. **AJAX交互**：如果网站地图数据量大，为了提高页面加载...
jQuery仿excel表格选中变色效果代码.zip
07-05
5. **DOM遍历**：在处理表格时，可能需要遍历行(`tr`)和列(`td`)，jQuery提供了`.each()`函数进行迭代。例如，遍历所有单元格以实现全选或取消全选的功能。 6. **范围选择**：仿Excel的另一个特性是连续选择多个...
改变按钮背景颜色，单击按钮实现了两种不同颜色相互转换
04-20
该程序可以改变按钮的背景颜色，通过单击该按钮可以实现在灰色与绿色之间的转换，同时可以在对应的编辑框中看到变化后的现象，适合于在下位机测试软件中应用。例如单击一个按钮使之长时间变绿，表明下位机在不停的测试。
点链接变色点另一个前一个还原
12-15
点链接改变颜色，点另一个前一个还原成默认颜色
jQuery点击变色
01-11
jQuery实现色块点击变色，点击色块后变色，点击其它色块，原色块变回默认颜色
点击按钮改变颜色和状态之二
suiyuechenglao的博客
07-19 2566
之前写过一个关于按钮改变状态的片段，但是有点繁琐，最近get了一个简单的方法。 1.首先设置一个全局变量_startBtn，用来转换选中时的button @interface OrderViewController ()UITableViewDataSource, UITableViewDelegate>{     UIButton *_stateBtn;//    
点击按钮改变背景色
爱日莲（qin1253409131）的博客
05-13 3028
点击按钮实现页面之间的跳转，如果不添加背景色，点击的是哪个按钮不太明显。所以就是用了下面的方法来实现这个效果（点击的时候改变背景色，当点击其他按钮的时候就会恢复）。 效果图如图所示： 话不多说，直接呈上代码： @property (nonatomic, strong) UIButton *firstBtn; @property (nonatomic, strong)
bootstrap 给表格的指定单元格值的行上色
分享·收获
03-29 1127
/** * 给表格的指定单元格值的行上色<br/> * 示例：setColor1('table_datalist', 'Waiting approval' , 'orange') * @returns */ function setColor1(tableId, findValue , colorValue){ $('#'+tableId+' tr').each(funct...
点击变色
Z15889363722的博客
08-28 354
css代码 <style> .select { background: #ccc; } </style> html代码 <div v-for="i in 10" @click="change(i)" :class="flag==i?'select':''"> {{i}} </div> <!-- 点击事件把当前点击的div的下标保存下来，如果这个div是当前点.
js实现按钮点击变色，其他的按钮恢复默认颜色
热门推荐
异想实验室|Arduion|ESP8266|Micro Python|
08-19 1万+
JavaScript实现按钮点击变色，其他的按钮恢复默认颜色，则需通过循环实现，当有按钮点击的时候，先将所有的按钮的颜色，更改为空，然后在针对，鼠标点击的相应的按钮，进行更改按钮颜色；onclick实现按钮点击后的操作；...
css点击变色
05-31
要实现点击后变色的效果，可以使用CSS中的:active伪类选择器。 例如，如果你想让一个按钮在被点击时变成深蓝色，可以这样写CSS代码： ``` button:active { background-color: navy; } ``` 这样，当用户点击按钮...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值