<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>我的生活</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="css/light7.min.css">
    <link rel="stylesheet" href="css/light7-swiper.min.css">
    <script type='text/javascript' src='js/jquery.js' charset='utf-8'></script>
</head>
<body>
<!-- 你的html代码 -->
<div class="page">
    <header class="bar bar-nav">
        <a class="button button-link button-nav pull-left" href="/demos/card" data-transition='slide-out'>
            <span class="icon icon-left"></span>
            返回
        </a>
        <h1 class="title">我的生活</h1>
    </header>
    <div class="content">
        <div class="list-block">
            <ul><li>
                    <div class="item-content">
                        <div class="item-inner">
                            <div class="item-input">
                                <label class="label-switch">
                                    <input id="inpu" type="checkbox">
                                    <div id="che1" class="checkbox"></div>
                                </label>
                            </div>
                        </div>
                    </div>
            </li></ul>
        </div><!--list-block-->
        <div class="content-block">
            <h1 id="h11">我是h1</h1>
            <h6 style="display: none" id="h66">我是话</h6>
        </div>
    </div><!--content-->
</div>
<script>
    $("#inpu").click(function(){
            if(this.checked) {
                $("#h11").hide();
                $("#h66").show();
            }else {
                $("#h11").show();
                $("#h66").hide();
            }
    })
</script>
<script type='text/javascript' src='js/light7.min.js' charset='utf-8'></script>

</body>
</html>

light7结合jquery实现开关按钮的更多相关文章

  1. jQuery滑动开关按钮效果

    效果图: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  2. 基于Bootstrap的jQuery开关按钮插件

        按钮 下载 使用方法 首先要在页面中引入依赖文件: jquery.Bootstrap.Bootstrap Switch CSS和Bootstrap Switch JS.这里用的是bootstr ...

  3. 基于Bootstrap的超酷jQuery开关按钮插件

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAAA2CAIAAAC0tsfoAAAB/0lEQVR4nO3bQWrCQBTGcc/mbVz0DD

  4. 基于Bootstrap的jQuery开关按钮组合

    Bootstrap是一款由Twitter推出的开源前端开发包,功能非常强大.今天我们要分享的这款jQuery开关按钮组合就是基于Bootstrap框架的,看了按钮的主题样式,也都是Bootstrap的 ...

  5. 【转】基于Bootstrap的超酷jQuery开关按钮插件

    基于Bootstrap的超酷jQuery开关按钮插件

  6. 使用jQuery实现类似开关按钮的效果

    转自:http://www.cnblogs.com/linjiqin/p/3148228.html 本案例实现类似开关按钮效果. 页面有下拉列表.文本框.按钮等表单元素,大致实现如下效果:1.页面一加 ...

  7. jquery实现on/off开关按钮

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  8. jquery开关按钮效果

    .circular1{ width: 50px; height: 30px; border-radius: 16px; background-color: #ccc; transition: .3s; ...

  9. JQuery的一些简单操作01

    一.JQuery的隐藏和显示效果 1.hide/show/toggle hide隐藏效果,hide(1000)括号里面跟毫秒,show显示效果同样后面括号可以有数值,toggle开关按钮,交替作用隐藏 ...

随机推荐

  1. 记录redis安装及常用命令

    Redis安装及常用命令 一.安装 1.下载,解压,进入redis解压目录,make. make PREFIX=目录/redis install :安装到指定目录文件名为redis. 2.将解压目录里 ...

  2. 黑阀 adb 命令

    adb 命令 adb -d shell sh /data/data/me.piebridge.brevent/brevent.sh

  3. Sky Code

    Sky Code 给出n个数,求选出4个数组合,使其gcd为1,,\(n<=10000\),每个数\(<=10000\). 解 理解1:容斥原理 注意到Mobius反演式子不好写出,于是我 ...

  4. 廖雪峰Java14Java操作XML和JSON-2JSON-2处理JSON

    解析JSON JSR 353 API 常用的第三方库 * Jackson * gson * fastjson Jackson: 提供了读写JSON的API JSON和JavaBean可以互相转换 可食 ...

  5. mysql 主从，双主同步

    1.创建用户并设置远程访问授权 1). A上添加: //ip地址为B的ip地址,用于B访问 ' with grant option; 2). B上添加://ip地址为A的ip地址,用于A访问 ' wi ...

  6. WCF服务编程-基础

    WCF是微软建立新一代的分布式应用及面向服务应用的标准平台,是基于原有.NET Framework 2.0的扩展.虽然在WCF发布不久就已经在项目中使用WCF技术了.但是由于在项目中还没有较大规模的应 ...

  7. 基于OneMap的水利行业共享服务平台搭建步骤

    今天上午再次学习Esri技术培训中心的“GIS服务共享与运维管理——之OneMap解决方案”课程,从中学习了OneMap的产品架构以及基于OneMap共享服务平台的搭建步骤.下面把其中水利行业的共享服 ...

  8. SPSS分析技术:多元方差分析

    SPSS分析技术:多元方差分析 下面要介绍多元方差分析的内容,多元方差分析是研究多个自变量与多个因变量相互关系的一种统计理论方法,又称多变量分析.多元方差分析实质上是单因变量方差分析(包括单因素和多因 ...

  9. Docker系列(十三)：Kubernetes Service的负载均衡和网络路由的秘密

    Kubernetes Service设计分析 什么是单体程序?所有的模块都在一个进程中 微服务,每一个服务是一个进程的模式 kubernetes中的service其实只是一个概念,是一组相同lable ...

  10. Spring MVC(十一)--使用字符串实现重定向

    Spring MVC中有两种重定向方式: 通过返回字符串,字符串必须以redirect:开头: 通过返回ModelAndView: 重定向的时候如果需要给重定向目标方法传参数,要分字符串参数和pojo ...