jquery实现点击改变背景色,点击其他恢复原来背景色,被点击的改变背景色
实现这个功能很简单,可是之前自己不怎么熟悉jquery,感觉各种乱写。现在终于整理好了思路。
html:
<div class="managementPanel">
<div>div1</div>
<div class="red">div2</div>
<div>div3</div>
<div>div4</div>
<div>div5</div>
</div>
css:
<style type="text/css">
.managementPanel div:hover{
background: #588600;
}
.red{
background: red;
}
</style>
jquery:
<script type="text/javascript">
//点击
$(document).ready(function(){
$(".managementPanel div").click(function() {
$(".managementPanel div").removeClass("red");
$(this).addClass("red");
})
});
</script>
很简单吧,点击增加颜色前先移除最开始的颜色,再增加。颜色有点丑,只是为了实现效果。最后类似这样.当然前提是一定要加载jquery库啊,不能粗心。

jquery实现点击改变背景色,点击其他恢复原来背景色,被点击的改变背景色的更多相关文章
- Jquery使用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jquery使用mousee ...
- 大幅度改变celery日志外观,修改成日志可点击跳转和鲜艳五彩日志,解决脚本中已添加handler的logger和框架日志重复记录问题。
大幅度改变celery日志外观,修改成日志可点击跳转和鲜艳五彩日志,解决脚本中已添加handler的logger和框架日志重复记录问题.打猴子补丁. 先把脚本中的所有logger的handlers全部 ...
- 一个大div里面包裹一个小div,里面的小div的点击事件不触发外面的这个大div的点击事件
一开始上html代码 <div id="div1" style="background: blue;width: 100px; height: 100px;&quo ...
- 页面上有3个输入框:分别为max,min,num;三个按钮:分别为生成,排序,去重;在输入框输入三个数字后,先点击生成按钮,生成一个数组长度为num,值为max到min之间的随机整数点击排序,对当前数组进行排序,点击去重,对当前数组进行去重。 每次点击之后使结果显示在控制台
<!DOCTYPE html> <html> <head> <!-- 页面上有3个输入框:分别为max,min,num:三个按钮:分别为生成,排序,去重: 在 ...
- 点击按钮使用window.open打开页面后,再次点击按钮会再打开一个页面,如何解决?
点击按钮使用window.open打开页面后,再次点击按钮会再打开一个页面,如何解决? window.open("page1.html","win1"); 这句 ...
- 关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位)
关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位) 起因:在进行bootstrap的.navbar-brand内文字设置垂直居中时采用li ...
- jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色
jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...
- 2016/4/1 jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色
jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...
- jquery 复选框全选/全不选切换 普通DOM元素点击选中/取消选中切换
1.要选中的复选框设置统一的name 用prop() prop() 方法设置或返回被选元素的属性和值. $("#selectAll").click(function(){ $(&q ...
- jQuery点击弹出层,弹出模态框,点击模态框消失
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...
随机推荐
- Android 上多方式定位元素(python)
Android 上多方式定位元素(python) 在学习实际UI自动化测试的时候,首先就需要定位元素,然而定位元素也是最头疼的地方,因为元素各种控件名称的缺失会影响元素的准确定位.下面针对Androi ...
- EXT属性
Extjs & Ext.Net 弹出整个浏览器对话框的方法 top.Ext.Msg.alert("值"); top.Ext.Msg.confirm("值" ...
- panel控件 换行
Panel1.Controls.Add(new LiteralControl("<BR/>"));
- erp crm oa
erp是企业管理计划 crm是客户关系管理 oa是办公自动化erp管理的是企业的进销存.产供销.财务等crm主要是管理企业的客户,可以和erp的销售系统挂钩oa主要是管理一些内部的文档.公告,行政信息 ...
- (转载)iscroll.js的使用
入门 Scroll是一个类,每个需要使用滚动功能的区域均要进行初始化.每个页面上的iScroll实例数目在设备的CPU和内存能承受的范围内是没有限制的. 尽可能保持DOM结构的简洁.iScroll使用 ...
- 原生JS研究:学习jquery源码,收集整理常用JS函数
原生JS研究:学习jquery源码,收集整理常用JS函数: 1. JS获取原生class(getElementsByClass) 转自:http://blog.csdn.net/kongjiea/ar ...
- Android Webview与Html5交互
转:http://fangjie.info/?p=417#more-417 一.WebView.setWebViewClient(new MyWebViewClient()); 1.public ...
- 自定义alert,confirm,prompt事件,模仿window.alert(),confirm(),prompt()
css代码: /*custom_alert and custom_confirm*/ ; } ;;background-color: #585858; padding: 30px 30px; bord ...
- 各种语言中的urlencode方法
转载自:http://blog.sina.com.cn/s/blog_3f195d2501000a9b.html URLENCODE和URLDECODE是比较常用的URL参数转换方法,为以后使用方便, ...
- 让乌龟在提交cocos2d-x版本时自动去掉不需要的东东
引擎版本:2.1.4 ide:vs2012 一般协作开发情况下,有意思无意将bin.obj等一些目录添加到版本管理中是很烦人的事儿,在VS中不断地编译程序集和提交将带来版本暴增问题.如果你用的是乌龟S ...