<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

        <meta name="apple-mobile-web-app-capable" content="yes">

        <meta name="apple-mobile-web-app-status-bar-style" content="black">

        <meta name="description" content="aportpower"/>

        <title></title>

        <style type="text/css">

            .tubiao{

                width: 100%;

                height: 200px;

                border: 1px solid #000;

                background: #333;

            }

            .tubiao span{

                float: right;

                display: inline-block;

                width: 30px;

                height: 30px;

                margin-top: 85px;

                margin-right: 85px;

                background: url(../img/tab_collection_normal.png) no-repeat center;

                background-size: 100% 100%;

                border: 1px solid red;

            }

        </style>

    </head>

    <body>

        <div class="tubiao"><span></span></div>

        <script src="../js/lib/jquery-2.1.0.js"></script>

        <script type="text/javascript">

            var flag = 1;

            $(".tubiao span").unbind().bind('click',function(){

                if (flag) {

                    //$(this).css("background","red");

                    $(this).css({"background":"url(../img/tab_collection_light.png) no-repeat center", "background-size":"100% 100%"});

                    console.log("tab_collection_light.png");

                    flag=0;

                } else{

                    //$(this).css("background","magenta");

                    $(this).css({"background":"url(../img/tab_collection_normal.png) no-repeat center", "background-size":"100% 100%"});

                    console.log("tab_collection_normal.png");

                    flag=1;

                }

            })

        </script>

    </body>

</html>

注：图片自己添加。。。别忘了是jQuery！！！

 

点击选中/取消选中flag的更多相关文章

  1. jquery 复选框全选/全不选切换 普通DOM元素点击选中/取消选中切换

    1.要选中的复选框设置统一的name 用prop() prop() 方法设置或返回被选元素的属性和值. $("#selectAll").click(function(){ $(&q ...

  2. jquery 单击选中 再次选中取消选中

    html: <div id="full" class='weui-popup__container' style="background: #fff"&g ...

  3. zTree 节点勾选取消勾选 选中取消选中

    zTreeObj.cancelSelectedNode function 举例 取消当前所有被选中节点的选中状态 var treeObj = $.fn.zTree.getZTreeObj(" ...

  4. jQuery实现点击单选按钮切换选中状态效果

    实现效果:第一次点击单选按钮时选中该按钮,再次点击时取消选中该单选按钮. 关键就是要将单选按钮原来的值保存起来,第二次点击时.如果原来选中则取消,否则选中. 看代码吧,是用jQuery实现的,功能虽小 ...

  5. 点击div全选中再点击取消全选div里面的文字

    想做一个就是点击一个div然后实现的功能是div里面的文字都成选中状态,然后就可以利用浏览器的自带的复制功能,任意复制在哪里去了 在网上百度了一下 然后网上的答案感觉很大的范围 然后一些搜索 然后就锁 ...

  6. easyui datagrid取消点击行的选中事件

    http://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&theme=material&dir=ltr&pitem= ...

  7. 【前端JS】radio 可单选可点击取消选中

    普通情况下 radio 单选框仅仅能实现多选一的效果,可是一旦选择当中一个后,这个单选框就不可点击取消其选中状态了.这样的功能在某些业务环境下并不适用.有时我们既须要单选框的多选一效果.也须要复选框的 ...

  8. tableviewcell的取消选中，高亮

    1.取消多余cell的分割线 UIView *view = [UIView new]; view.backgroundColor = [UIColor clearColor]; [tableView ...

  9. radio(单选框)反复选中与取消选中

    做个记录,以便需要拿取 <script type="text/javascript"> $(function(){ 第一种 $('input:radio').click ...

随机推荐

  1. Spider爬虫-get、post请求

    1:概念: 爬虫就是通过编写程序,模拟浏览器上网,然后让其去互联网上抓取数据的过程. 2:python爬虫与其他语言的比较: (1)php爬虫弊端:多进程多线程支持的不好 (2)java:代码臃肿,重 ...

  2. 【瓜分5000元奖金】Wannafly挑战赛13

    链接:https://www.nowcoder.com/acm/contest/80/A来源:牛客网 zzy的小号 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他 ...

  3. Spring @注解详解（转）

    1.@controller 控制器(注入服务) 2.@service 服务(注入dao) 3.@repository dao(实现dao访问) 4.@component (把普通pojo实例化到spr ...

  4. IDA 操作记录

    IDA 操作记录 1.加载文件 windows 下,用ida加载文件后,会在该文件同目录下生成几个文件,含义如下: .id0 : 二叉树数据库 .id1:    文件包含描述每个程序字节的标记 .na ...

  5. Python tldextract模块准确获取域名和后缀

    Python tldextract 模块 - 功能说明 tldextract准确地从URL的域名和子域名分离通用顶级域名或国家顶级域名. 例如,http://www.google.com,你只想取出连 ...

  6. 消防（bzoj 2282）

    Description 某个国家有n个城市,这n个城市中任意两个都连通且有唯一一条路径,每条连通两个城市的道路的长度为zi(zi<=1000). 这个国家的人对火焰有超越宇宙的热情,所以这个国家 ...

  7. 【CF56E】Domino Principle（线性扫描，伪DP）

    每块多米诺骨牌所在的位置设为x,每块多米诺骨牌高度为h.如果将x位置上的多米诺骨牌向右翻到,它就可以影响[x+1, x+h-1]范围内的所有多米诺骨牌,让他们也翻到,同时这些被翻到的多米诺骨牌还能影响 ...

  8. Yii关联查询(转载)

    原文链接:http://keshion.iteye.com/blog/1607994 一.多表关联的配置 在我们使用 AR 执行关联查询之前,我们需要让 AR 知道一个 AR 类是怎样关联到另一个的. ...

  9. latex beamer 插入代码

    有网友在beamer中使用mcode也就是 listings 输出源代码时遇到如下错误: Runaway argument?! Paragraph ended before \lst@next was ...

  10. 搭建高可用服务注册中心-Spring Cloud学习第一天(非原创）

    文章大纲 一.Spring Cloud基础知识介绍二.创建单一的服务注册中心三.创建一个服务提供者四.搭建高可用服务注册中心五.项目源码与参考资料下载六.参考文章   一.Spring Cloud基础 ...