<!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. GUI——AWT框架和容器，创建简单窗体

    GUI概述:GUI(Graphical User Interface)—图形化用户界面.用户和程序之间可以通过GUI能方便友好地进行交互,在Java语言中,JFC(Java Foundation Cl ...

  2. 【Go】Panic函数

    panic(运行时恐慌)是一种只会在程序运行时才回抛出来的异常.在panic被抛出之后,如果没有在程序里添加任何保护措施的话,程序就会在打印出panic的详情,终止运行. 如果一个panic是无意间引 ...

  3. Welcome-to-Swift-19类型嵌套(Nested Types)

    枚举类型常被用于实现特定类或结构体的功能.也能够在有多种变量类型的环境中,方便地定义通用类或结构体来使用,为了实现这种功能,Swift允许你定义类型嵌套,可以在枚举类型.类和结构体中定义支持嵌套的类型 ...

  4. 【Luogu】P2254瑰丽华尔兹（堆优化DP）

    题目链接 我也不知道为什么脑子一抽就想了个堆优化……然后贼慢…… 因为上午听不懂wys的电音专场(快速傅立叶变换),然后就做了这么一道题. 首先朴素DP很sb都能秒出.就是枚举时刻.位置(两维)然后转 ...

  5. hihoCoder #1161 八卦的小冰

    题目大意 考虑一个由 $n$ 个人构成的社交网络,其中任意两人都有一个用非负整数表示的亲密度. 初始时给出 $m$ 对人的亲密度,其余的亲密度为 $0$ . 定义此社交网络的「八卦度」为异性之间的亲密 ...

  6. ACM程序设计选修课——1044: (ds:队列)打印队列（queue模拟）

    问题 A: (ds:队列)打印队列 时间限制: 1 Sec  内存限制: 128 MB 提交: 25  解决: 4 [提交][状态][讨论版] 题目描述 网络工程实验室只有一台打印机,它承担了非常繁重 ...

  7. AxureRP8 实现时间功能

    利用AxureRP8中空间的动态面板的状态改变时间设置文本的值,从而实现时间功能,如下内容. 1.新建index页面,如已有index页面忽略这步即可. 2.拖入一个文本标签,将文本标签的名称命名为: ...

  8. delphi 四舍五入Round函数【百帖整理】

    在最近版本的Delphi Pascal 编译器中,Round 函数是以 CPU 的 FPU (浮点部件) 处理器为基础的.这种处理器采用了所谓的 "银行家舍入法",即对中间值 (如 ...

  9. Springboot构建问题集

    最近在搭建框架时遇到很多细节问题,时间久了就很容易忘记,在此记录一下. 1.问题:Warning:java: 来自注释处理程序 'org.antlr.v4.runtime.misc.NullUsage ...

  10. Leetcode 数组问题3：旋转数组

    问题描述: 给定一个数组,将数组中的元素向右移动 k 个位置,其中 k 是非负数. 示例 : 输入A数组: [1,2,3,4,5,6,7] 和 k = 3 输出: [5,6,7,1,2,3,4] 解释 ...