<!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. redis书籍

    redis中文官网命令网址:http://doc.redisfans.com/ redis英文官网命令网址:https://redis.io/commands redis书籍 由 Karl Segui ...

  2. fileinput URL携带参数的问题,uploadExtraData,Bootstrap

    因为无法在URL中执行其他代码,通过阅读文档可知可以由uploadExtraData参数携带数据.于是在这里携带,如果uploadExtraData 无法接收到数据,一般是格式有误, 先尝试这个简单的 ...

  3. 关于Ajax提交后无法刷新iframe页面的问题

    原因及解决方法: 要把刷新代码写进ajax的代码块里面,而不是放在后面

  4. 运行Jmeter时,响应数据中文乱码问题解决办法

    需要修改jmeter中的配置,在Jmeter安装目录/bin/jmeter.properties文件中进行修改: sampleresult.default.encoding默认为ISO-8859-1, ...

  5. ENSP 安装后,启动路由器提示错误41

    ENSP 安装后,启动路由器提示错误41 环境: 安装的软件清单: VirtualBox-5.2.28-130011-Win.exe WinPcap_4_1_3.exe Wireshark-x64-3 ...

  6. less知识点总结(二)

    变量:以@开头,由于变量只能定义一次,其本质就是“常量”. @nice-blue: #5B83AD; @light-blue: @nice-blue + #; #header { color: @li ...

  7. SPSS操作:轻松实现1:1倾向性评分匹配(PSM)

    SPSS操作:轻松实现1:1倾向性评分匹配(PSM) 谈起临床研究,如何设立一个靠谱的对照,有时候成为整个研究成败的关键.对照设立的一个非常重要的原则就是可比性,简单说就是对照组除了研究因素外,其他的 ...

  8. Directx11教程(44) alpha blend(1)

    原文:Directx11教程(44) alpha blend(1)    我们知道,D3D11中按Frame来渲染物体,每个Frame中又可能包含若干个primitive,如下面的示意图所示:     ...

  9. C++ lambda表达式总结

    一个lambda表达式用于创建闭包.lambda表达式与任何函数类似,具有返回类型.参数列表和函数体.与函数不同的是,lambda能定义在函数内部.lambda表达式具有如下形式 [ capture ...

  10. 小爬爬1:开篇&&简单介绍启动

    1.第一阶段的内容 2.学习的方法? 思考,总结,重复 3.长大了意味着什么?家庭的责任,真的很重 4.数据分析&&数据清洗 numpy&&pandas&&am ...