实现这个功能很简单,可是之前自己不怎么熟悉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. 怎么在一个list集合里面筛选重复的数据,在重复的数据中取最后添加的那条数据

    1.先将集合进行分组(分组字段)2.在判断分组的数量是否大于 03.大于0,则有重复的数据

  2. PropertyGrid—为复杂属性提供下拉式编辑框和弹出式编辑框

    零.引言 PropertyGrid中我们经常看到一些下拉式的编辑方式(Color属性)和弹出式编辑框(字体),这些都是为一些复杂的属性提供的编辑方式,本文主要说明如何实现这样的编辑方式. 一.为属性提 ...

  3. GridView专栏

    鉴于GridView的强大,鄙人突然心血来潮,想把GridView单独拿出来整理一下. (一)gridview如何加自增长列 protected void GridView1_RowDataBound ...

  4. select Into用法

    1. insert into 表(列1,列2) select 列1,列2 from 表2 where.... 2.select * into 表2 from 表 1where... 上面写法标识将表1 ...

  5. LevelDB.NET性能测试

    最近了解了一下LevelDB,发觉这个嵌入式的K-V数据性能不错,所以顺便想在使用层面了解一下.由于LevelDB也有针对.net的实现,所以就针对了LevelDB.NET进行了一个简单的读写压力测试 ...

  6. oracle11g用户名密码不区分大小写

    oracle 11g 以前的版本的用户名和密码是不区分大小写的; oracle 11g 用户名和密码默认区分大小写,可更改alter system set sec_case_sensitive_log ...

  7. ajax读取txt文件

    注意url为网络路径 <html><head><script type="text/javascript">  function loadXML ...

  8. Centos查看端口占用情况和开启端口命令

    Centos查看端口占用情况命令,比如查看80端口占用情况使用如下命令: lsof -i tcp:80 列出所有端口 netstat -ntlp 1.开启端口(以80端口为例)方法一: /sbin/i ...

  9. 了解神奇的this

    this的用法 在函数中this到底取何值,是在函数真正被调用执行的时候确定的,函数定义的时候确定不了. 因为this的取值是执行上下文环境的一部分,每次调用函数,都会产生一个新的执行上下环境.举例说 ...

  10. [Node.js]expressjs简单测试连接mysql

    下载好node.js和通过npm安装好express.js后,先写package.json { "name": "application-name", &quo ...