<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.11.3/jquery.js" type="text/javascript" charset="utf-8"></script> <style type="text/css">
div {
display: block;
} .div1 {
width: 100px;
height: 50px;
background: darkolivegreen;
margin: 10px;
float: left;
} .stylediv {
border: 1px solid red;
background: white;
}
</style> </head> <body> <div class="div1"> </div>
<div class="div1"> </div>
<div class="div1"> </div>
<div class="div1"> </div>
<script type="text/javascript">
$(function() {
$(".div1").click(function() {
$(this).addClass("stylediv").siblings().removeClass("stylediv"); }); });
</script>
</body> </html>

jquery实现单击div切换背景的更多相关文章

  1. jquery实现tab页切换显示div

    1.jQuery实现tab切换显示代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &q ...

  2. 基于jquery左侧带选项卡切换的焦点图

    今天给大家分享一款基于jquery左侧带选项卡切换的焦点图.这款焦点图左侧有短标题,单击切换并显示长标题.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  3. jquery-11 jquery中的事件切换如何实现

    jquery-11 jquery中的事件切换如何实现 一.总结 一句话总结:事件切换hover()和toggle()函数.参数两个,都是函数,依次执行两个函数. 1.如何实现单击切换图片? 用togg ...

  4. jquery叠加页片自动切换特效

    查看效果:http://keleyi.com/keleyi/phtml/jqtexiao/34.htm 下面是HTML代码: <!DOCTYPE html> <html xmlns= ...

  5. android Button 切换背景,实现动态按钮和按钮颜色渐变

        android Button 切换背景,实现动态按钮和按钮颜色渐变 一.添加android 背景筛选器selector实现按钮背景改变     1.右键单击项目->new->Oth ...

  6. jquery - 通过点击切换文字内容

    今天要写一个简单的显示/隐藏效果,本以为是挺简单的事儿,没想到还真因为基本功不扎实遇到了问题,这里跟大家分享一下. 百度了很多方法,精简能用的干货实在太少,最后还是通过去查jq的官方api才找到了解决 ...

  7. 一款jquery实现的整屏切换特效

    今天要为大家带来一款由jquery实现的整屏切换特效,在右侧有圆型小标,每点一个切换一屏.当然,你也可以滚动鼠标来切换页面.效果非常好.我们看下效果吧 在线预览   源码下载 html代码: < ...

  8. 基于jQuery仿Flash横向切换焦点图

    给各网友分享一款基于jQuery仿Flash横向切换焦点图.利用Flash可以制作很多漂亮的图片相册应用,今天我们要用jQuery来实现这样的效果.它是一款仿Flash的横向图片切换焦点图插件,可以自 ...

  9. 自己编写jQuery插件之Tab切换

    自己编写jQuery插件之 Tabs切换 jquery ui 带有Tabs切换插件,但其css样式太难维护,引用的东西太多,因此就自己写了个. 起初我Html代码架子是这样的: <div cla ...

随机推荐

  1. LUOGU P2587 [ZJOI2008]泡泡堂

    传送门 解题思路 刚开始先写了个田忌赛马的贪心,就是要是打不过就拿最弱的送死,30分...后来瞄了眼题解,发现这样是错的,比如说这样的数据 : 3 3 2 3 1 如果用田忌赛马的话,让2-3 3-1 ...

  2. mysql错误日志目录

    在windows下,一般是mysql安装目录下的data目录下 ,扩展名是.err的文件.

  3. Total Number of Unicorn Companies: 188

    https://www.cbinsights.com/research-unicorn-companies   Total Number of Unicorn Companies: 188 Total ...

  4. 从0开始学习 GitHub 系列之「02.加入 GitHub」

    转载地址: http://blog.csdn.net/googdev/article/details/52787586 看完昨天的文章「从0开始学习 GitHub 系列之「初识 GitHub」」估计不 ...

  5. SQL中null比较的雷区

    SQL中遇到null要格外小心! oracle最坑: oracle中在可为null的字段上做逻辑关系运算要格外小心,如 <>,>,=,<,任何与null的运算结果都返回fals ...

  6. PHP 从 MongoDb 中查询数据怎么样实现

    一.软件环境(版本非必须) php v5.6 扩展:MongoDB nginx v1.11 mongodb v3.2 note: 必须安装MongoDB扩展 二.连接 $client = new Mo ...

  7. 阿里云SaaS生态战略发布,用宜搭5分钟部署OCR文字识别

    7月26日,在阿里云合作伙伴峰会上,阿里云发布SaaS生态战略:通过SaaS加速器为合作伙伴提供应用开发.集成.上云.售卖的全链路解决方案,提升开发效率和集成效率,缩短商业化周期. 作为阿里SaaS加 ...

  8. 【Leetcode Top-K问题 BFPRT】第三大的数(414)

    题目 给定一个非空数组,返回此数组中第三大的数.如果不存在,则返回数组中最大的数.要求算法时间复杂度必须是O(n). 示例 1: 输入: [3, 2, 1] 输出: 1 解释: 第三大的数是 1. 示 ...

  9. DTcms设置 IIS6.0设置url重写导致editor上传全部失效

    1.修改iis的重写规则为htm 2.修改后台后缀为htm 解决

  10. 【时光回溯】【JZOJ3567】【GDKOI2014】石油储备计划

    题目描述 输入 输出 对于每组数据,输出一个整数,表示达到"平衡"状态所需的最小代价. 样例输入 2 3 6 1 5 1 2 1 2 3 2 5 4 5 4 3 2 1 3 1 1 ...