<!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. ZooKeeper的分布式锁实现

    分布式锁一般有三种实现方式: 1. 数据库乐观锁: 2. 基于Redis的分布式锁: 3. 基于ZooKeeper的分布式锁. 本篇博客将介绍第三种方式,基于Zookeeper实现分布式锁.虽然网上已 ...

  2. dll加载过程全局变量会先初始化

    在一个生成dll的工程中看到一个文件只有一句全局变量初始化的代码,很好奇为什么这句代码在dll加载的时候就会执行,因此断点调试发现 __declspec(noinline) BOOL __cdecl ...

  3. eclipse svn提交忽略文件及文件夹，ignore设置无效..

    如果之前提交过此文件,就不能设置忽略该文件了.所以第一次提交的时候要搞清楚再提交. [亲测,的确如此,用 Windows -> Preferences -> Team -> Igno ...

  4. Spring 的初次见面

    简介: Spring Framework 是一个开源的企业级应用程序框架,为构建满足企业级需求的应用程序提供了大量的工具集.推出该框架的原因是在时候用J2EE进行开发是会提高复杂性. Spring三大 ...

  5. linux环境变量设置命令

    1echo $ <变量名> //显示某个环境变量 2env     // environment (环境) 的简写,列出来所有的环境变量 3set     //显示所有本地定义的Shell ...

  6. 集训队日常训练20180525-DIV2

    A.2295 求有多少素数对和等于n. 暴力. #include <bits/stdc++.h> using namespace std; int ss(int n) { ,a=sqrt( ...

  7. 【python之路9】类型定义与转换

    一.整型(int),int的作用 1.创建int类型并赋值 n = 10 或者 n = int(10)   #只要是类名加括号,都会去执行类中的 __init__()方法 n = 10,实际内部会去执 ...

  8. C#和JS交互 WebBrowser实例

    本文实现了WebBrowser的简单例子 1.引用System.Windows.Froms.dll 2.引用WindowsFormsIntegration.dll 代码如下: public parti ...

  9. vuehomework1

    红黄蓝三个按钮,点击不同的按钮可以切换一个200*200的矩形框对应的颜色 <!DOCTYPE html> <html lang="en"> <hea ...

  10. vue项目开发过程常见问题

    更新时间:2018-07-29 1.data functions should return an object // 这个问题是 Vue 实例内,单组件的data必须返回一个对象;如下 <sc ...