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 ...
随机推荐
- js判断手机的类型
var ua = navigator.userAgent;if(ua.match(/iPhone|iPod/i) != null){console.log("iphone代码"); ...
- WindowsForm界面 运行顺序 Form属性
WindowsForm界面 运行顺序 Form属性 什么是类:1 类是面向对象编程的基本单元.类包含了两个成员 字段(Field)和方法方法(Method) 2 字段即变量 方法即函数什么是字段:字段 ...
- C#9 结构体 员工信息 学生成绩
结构体:相当于是我们自己定义的一种复杂的类型. int... double float bool char string DateTime 数组类型 生活中大部份的对象都是复合型的对象. 如何定 ...
- zookeeper_03:Java 客户端(原生API)
环境配置 下载并ZooKeeper的发行版 新建Java project,并导入jar包 创建会话 public class CreateSession implements Watcher { pr ...
- java之认识基本数据类型及其封装类装箱和拆箱总结
由于在java中,数据类型总共可分为两大种,基本数据类型和引用数据类型.基本类型的数据不是对象,所以对于要将数据类型作为对象来使用的情况,java提供了相对应的包装类.对于8种数据类型的总结如下: 自 ...
- zmud中文版_汉化补丁_汉化文件ZMUD破解
ZMUD721中文版 http://pan.baidu.com/s/1mixwIoC
- WebMatrix安装和使用
官网:http://www.microsoft.com/web/webmatrix/ 一直觉得dreamweaver已经过时了,很多新的库都不支持.而且,启动慢,占用内存多,是时候换一个ide了. h ...
- Buffer Cache(缓冲区缓存)篇:keep缓冲区池(保留池)
Buffer Cache可以有三个池 默认缓冲区池 keep缓冲区池 recycling缓冲区池 --保留池和回收池可以独立于sga中的其他缓存分配内存.创建表的时候可以在storage子句中使用b ...
- yum localinstall rpm
- 【Leetcode】Same Tree
给定两棵二叉树,判断是否相等(即树的结构以及各结点中的值都一样) Given two binary trees, write a function to check if they are equal ...