<!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. 为什么在header 和 session 之前不能有输出

    1.在header输出之前有输出内容的话,就会造成对header的错误理解(尽管现在已经能容错了),例如不是满足“keyword: value\n”的格式还好,直接错误了,但是满足“keyword: ...

  2. Linux Shell系列教程之（六）Shell数组

    本文是Linux Shell系列教程的第(六)篇,更多shell教程请看:Linux Shell系列教程 Shell在编程方面非常强大,其数组功能也非常的完善,今天就为大家介绍下Shell数组的用法. ...

  3. iOS学习笔记25-录音和网络流媒体

    .录音 AVFoundation框架还有一个AVAudioRecorder类专门处理录音操作,它同样支持多种音频格式. 先来了解下AVAudioRecorder的常用属性: @property (re ...

  4. 【bzoj2115】[Wc2011] Xor DFS树+高斯消元求线性基

    题目描述 输入 第一行包含两个整数N和 M, 表示该无向图中点的数目与边的数目. 接下来M 行描述 M 条边,每行三个整数Si,Ti ,Di,表示 Si 与Ti之间存在 一条权值为 Di的无向边. 图 ...

  5. 【bzoj3105】[cqoi2013]新Nim游戏 高斯消元求线性基

    题目描述 传统的Nim游戏是这样的:有一些火柴堆,每堆都有若干根火柴(不同堆的火柴数量可以不同).两个游戏者轮流操作,每次可以选一个火柴堆拿走若干根火柴.可以只拿一根,也可以拿走整堆火柴,但不能同时从 ...

  6. 搜索引擎快捷导航：一个简单的chrome插件（教程）

    一.如何通过练习来提高学习新框架的最好姿势是:基于现有的业务来学习.即从工作中学习,从实践中学.但是,如果一直只使用新的框架来重写旧的业务,成长也会趋近于0.第一次,使用新框架时收获可能颇丰:第二次, ...

  7. java面试题之如何实现处理线程的返回值？

    有三种实现方式: 主线程等待法: 使用Thread类的join方法阻塞当前线程以等待子线程处理完毕: 通过Callable接口实现,通过FutureTask 或者线程池:

  8. C++11学习笔记（5） —— override and final （转）

    原文转自 http://blog.csdn.net/fire_lord/article/details/8540592 1.简介 C++为我们提供了继承和虚函数的重写特性. 在派生类中,重写虚函数不强 ...

  9. perfect-scrollbar 轻量级滚动插件

    它是一个轻量级的jquery插件. 需要引入的文件: css: #box { position: absolute; overflow: hidden; height: 200px; width: 2 ...

  10. Java后端WebSocket的Tomcat实现 html5 WebSocket 实时聊天

    WebSocket协议被提出,它实现了浏览器与服务器的全双工通信,扩展了浏览器与服务端的通信功能,使服务端也能主动向客户端发送数据.Tomcat7.0.47上才能运行. 需要添加Tomcat里lib目 ...