<!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. git中的错误

    ! [rejected] master -> master (non-fast-forward) error: failed to push some refs to 'git@gitee.co ...

  2. 我悲惨的人生，该死的UPX壳，谁能救救我

     一个程序,被加了UPX壳... 结果加壳的人把UPX脱壳的关键参数都给删除掉了,我现在连脱壳都脱不掉... 我从网上下载了UPX最新3.91版本的壳,复制了两个UPX.exe,本来互相加壳和脱壳都没 ...

  3. 内核、中断和网络 $ sysctl -a | grep ...$ cat /proc/interrupts$ cat /proc/net/ip_conntrack /* may take some time on busy servers */$ netstat$ ss -s

    你的中断请求是否是均衡地分配给CPU处理,还是会有某个CPU的核因为大量的网络中断请求或者RAID请求而过载了? SWAP交换的设置是什么?对于工作站来说swappinness 设为 60 就很好, ...

  4. centos7默认安装没有连接网络

    1.显示所有连接 #nmcli con show 2.连接网络 #nmcli con up ens33 这个ens33是通过第一步查到的 /etc/sysconfig/network-scripts目 ...

  5. PHPStrom直接在编辑器打开php文件

    以下是自己配置PHP+Apache的开发环境,集成环境的话要换第二种方法(看个人配置):PHPStrom 如果希望直接在编辑器打开php文件,要做以下这几步配置. 第一种:非集成环境 1 2 3 第二 ...

  6. web前端学习（三）css学习笔记部分（5）-- CSS动画--页面特效、HTML与CSS3简单页面效果实例

    CSS动画--页面特效部分内容目前仅仅观看了解内容,记录简单笔记,之后工作了进行内容的补充 7.  CSS动画--页面特效 7.1  2D.3D转换 7.1.1  通过CSS3转换,我们能够对元素进行 ...

  7. 微服务Eureka使用详解

    Eureka是spring cloud中的一个负责服务注册与发现的组件.遵循着CAP理论中的A(可用性)P(分区容错性). 一个Eureka中分为eureka server和eureka client ...

  8. 使用mpvue开发github小程序总结

    前言 最近有点闲,想起关注已久的mpvue写小程序,所以稍微肝了半个多月写了个github版的微信小程序,已上线.现在总结一下遇到的坑. 扫码体验. 项目地址.https://github.com/c ...

  9. java 日期合法

    try { String date_str = "5555-22-33"; SimpleDateFormat format=new SimpleDateFormat("y ...

  10. 【机器学习PAI实战】—— 玩转人工智能之你最喜欢哪个男生？

    摘要: 分类问题是生活中最常遇到的问题之一.普通人在做出选择之前,可能会犹豫不决,但对机器而言,则是唯一必选的问题.我们可以通过算法生成模型去帮助我们快速的做出选择,而且保证误差最小.充足的样本,合适 ...