有多个按钮，点击一个变色，点击另一个变色，原来的恢复颜色的方法

之前用到网上说的fouce也可行，但是失去焦点后，点击别处按钮也会恢复颜色，所以这样也行不通。后来找了好久，这个方法终于行的通。

html代码：

我是在table中加的按钮submit。

<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="ETF两融策略" /></td></tr></table>

样式<style>

<style>
.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>

其中hover是鼠标移上去的颜色。

js代码

<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>

这样点击一个按钮变色，再点击另一个按钮原来的按钮就恢复颜色。

转载于:https://www.cnblogs.com/why-love-study/p/6025383.html

有多个按钮，点击一个变色，点击另一个变色，原来的恢复颜色的方法相关推荐

转：（很有用）有多个按钮，点击一个变色，点击另一个变色，原来的恢复颜色的方法
<table> <tr><td><input class="flag hq_hy" type="submit" οnc ...
[js插件开发教程]一步步开发一个可以定制配置的隔行变色小插件
隔行变色功能,不用js,直接用css伪类就可以做,这个实例可以作为js插件开发很好的入门级实例.本文实现的隔行变色包括以下功能: 1,支持2种常用结构共存( div元素和表格类型 ) 2,一个页面 ...
php点击按钮显示隐藏代码,jQuery中点击按钮实现显示与隐藏的方法
jQuery能够简单快捷的实现很多功能,因此在前端开发中被广泛使用,正在学习jQuery的小伙伴,你会用jQuery实现点击显示再次点击隐藏的效果吗(即jQuery二次点击隐藏)?这篇文章就和大家讲讲 ...
html表单中按钮添加超链接,JS 实现点击按钮实现超链接功能
通过 JS,直接改变报表中相关参数的参数值,报表画面呈现参数值对应的内容. 2.1 准备数据集新建一个决策报表,新建数据集 ds1,SQL语句为:SELECT * FROM 销量 where 地区= ...
android点击另一个app,Android 怎么从一个APP中打开另外一个APP
Android 如何从一个APP中打开另外一个APP 众所周知,在一个APP内部,从一个页面跳转到另外一个页面是使用startactivity函数来实现的. 同样的,对于应用之间的跳转也是如此的.应用 ...
使用函数节流思想避免 SAP UI5 应用里按钮短时间内被高频重复点击试读版
一套适合 SAP UI5 初学者循序渐进的学习教程作者简介 Jerry Wang,2007 年从电子科技大学计算机专业硕士毕业后加入 SAP 成都研究院工作至今.Jerry 是 SAP 社区导师,S ...
点击按钮显示文字，再次点击隐藏文字
点击按钮显示文字,再次点击隐藏文字点击按钮显示文字,再次点击按钮隐藏文字通过if条件判断css样式来做 <!DOCTYPE html> <html lang="en&q ...
【Android】点击按钮播放音乐，再次点击停止播放
1.在res下新建raw文件夹将音频复制粘贴至文件夹 2.代码 (1)PlatformActivity.java public static int cnt = 0;SoundPool sp;//声 ...
android切换字体颜色,Android开发实现按钮点击切换背景并修改文字颜色的方法
本文实例讲述了Android开发实现按钮点击切换背景并修改文字颜色的方法.分享给大家供大家参考,具体如下: 其实原理很简单,用到的是selector,用来设置android:background和an ...

有多个按钮，点击一个变色，点击另一个变色，原来的恢复颜色的方法

有多个按钮，点击一个变色，点击另一个变色，原来的恢复颜色的方法相关推荐

最新文章

热门文章