实现这个功能很简单,可是之前自己不怎么熟悉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. Marshal 类的内存操作的一般功能

    Marshal类 提供了一个方法集,这些方法用于分配非托管内存.复制非托管内存块.将托管类型转换为非托管类型,此外还提供了在与非托管代码交互时使用的其他杂项方法. 命名空间:System.Runtim ...

  2. A==?B(A,B超级大)

    #include <iostream>#include <string.h>#include <cstring>using namespace std;struct ...

  3. Ubuntu packages multi-architectures

    Show current machine architecture dpkg --print-architecture It's built-in to the currently installed ...

  4. VS2010 添加资源文件后,出现 “LNK1123: 转换到 COFF 期间失败: 文件无效或损坏”错误

    1>LINK : fatal error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏 解决方法: 一.1.点击“项目”-->“属性”-->“清单工具” 2.‘输入 ...

  5. 如何实现 Excel方式二维变色提示的 m*n 表格

    此代码当m≠n 时,有问题.暂时还未解决此问题. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  6. IO-02

    /** 2 *A2-IO-02. 整数四则运算(10) 3 *C语言实现 4 *测试已通过 5 */ #include "stdio.h" #include "stdli ...

  7. eclipse 改包名

    转载自: http://www.2cto.com/kf/201304/206747.html 1.在项目上右键,选择android tools->rename application packa ...

  8. egret-android-support-gradle版

    从3.1.3开始,Egret已经实现了Gradle构建!所以下文你爱看不看! 迟钝的Egret从3.1.3版本才开始支持Gradle,而笔者早在1.6.x版本就已经支持了,说明什么?说明Egret在某 ...

  9. android 百度地图定位功能实现

    历经几天时间,终于把定位功能给实现了,可谓是费劲千辛万苦啊,有定位知识还有图层知识,在这里我把代码给大家贴出来,一起分享一下下啦. package com.example.foreveross.off ...

  10. foj 2150 Fire Game(bfs暴力)

         Problem Description Fat brother and Maze are playing a kind of special (hentai) game on an N*M ...