实现这个功能很简单,可是之前自己不怎么熟悉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实现点击改变背景色,点击其他恢复原来背景色,被点击的改变背景色的更多相关文章

  1. Jquery使用mouseenter和mouseleave实现鼠标经过弹出层且可以点击

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jquery使用mousee ...

  2. 大幅度改变celery日志外观,修改成日志可点击跳转和鲜艳五彩日志,解决脚本中已添加handler的logger和框架日志重复记录问题。

    大幅度改变celery日志外观,修改成日志可点击跳转和鲜艳五彩日志,解决脚本中已添加handler的logger和框架日志重复记录问题.打猴子补丁. 先把脚本中的所有logger的handlers全部 ...

  3. 一个大div里面包裹一个小div,里面的小div的点击事件不触发外面的这个大div的点击事件

    一开始上html代码 <div id="div1" style="background: blue;width: 100px; height: 100px;&quo ...

  4. 页面上有3个输入框:分别为max,min,num;三个按钮:分别为生成,排序,去重;在输入框输入三个数字后,先点击生成按钮,生成一个数组长度为num,值为max到min之间的随机整数点击排序,对当前数组进行排序,点击去重,对当前数组进行去重。 每次点击之后使结果显示在控制台

    <!DOCTYPE html> <html> <head> <!-- 页面上有3个输入框:分别为max,min,num:三个按钮:分别为生成,排序,去重: 在 ...

  5. 点击按钮使用window.open打开页面后,再次点击按钮会再打开一个页面,如何解决?

    点击按钮使用window.open打开页面后,再次点击按钮会再打开一个页面,如何解决? window.open("page1.html","win1"); 这句 ...

  6. 关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位)

    关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位) 起因:在进行bootstrap的.navbar-brand内文字设置垂直居中时采用li ...

  7. jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色

    jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...

  8. 2016/4/1 jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色

    jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...

  9. jquery 复选框全选/全不选切换 普通DOM元素点击选中/取消选中切换

    1.要选中的复选框设置统一的name 用prop() prop() 方法设置或返回被选元素的属性和值. $("#selectAll").click(function(){ $(&q ...

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

随机推荐

  1. (原) Jquery 判断设备是PC端,还是移动端

    判断设备是PC端,还是移动端 var ua = navigator.userAgent.toLocaleLowerCase(); var pf = navigator.platform.toLocal ...

  2. JSP简介

    论坛 博客 微论 问答 游戏厅 天涯客 读书 更多 手机 服务 登录 注册   聚焦 民生 文学 旅游 财经 汽车 IT数码 时尚 情感 娱乐 视频 更多 北京 上海 广东 更多 天涯部落> J ...

  3. 回滚Swtichover

    从11.2.0.2开始,如果由于某种原因switchover没有成功,可以回滚switchover. For physical standby databases in situations wher ...

  4. hdu2243考研路茫茫——单词情结

    Problem Description 背单词,始终是复习英语的重要环节.在荒废了3年大学生涯后,Lele也终于要开始背单词了. 一天,Lele在某本单词书上看到了一个根据词根来背单词的方法.比如&q ...

  5. oracle表导入导出

    数据导出: 1 将数据库TEST完全导出,用户名system 密码manager 导出到D:\daochu.dmp中   exp system/manager@TEST file=d:\daochu. ...

  6. mysql的高级用法

    1.说明:创建数据库 CREATE DATABASE database-name 2.说明:删除数据库 drop database dbname 3.说明:备份sql server --- 创建 备份 ...

  7. ASP .Net Core 使用 Dapper 轻型ORM框架

    一:优势 1,Dapper是一个轻型的ORM类.代码就一个SqlMapper.cs文件,编译后就40K的一个很小的Dll. 2,Dapper很快.Dapper的速度接近与IDataReader,取列表 ...

  8. 开发移动端web应用, 使用手机自带键盘的搜索按钮

    很多时候在移动端的web页面中, 需要使用搜索功能, 然而页面中并没有太多的空间来放置一个像pc端上那样的搜索按钮, 这时候就需要借用手机输入法自带的搜索按钮来实现点击搜索 虽然不是什么大的功能, 但 ...

  9. jquery读取本地文件

    <html> <head> <script type="text/javascript" src="/jquery/jquery.js&qu ...

  10. 使用PDO执行SQL语句exec()、query()

    在PHP脚本中,通过PDO执行SQL查询与数据库进行交互,可以分为三种不同的策略,使用哪一种方法取决于你要做什么操作. 1.使用PDO::exec()方法 当执行INSERT.UPDATE和DELET ...