<!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. （转）NodeJS - 第一个应用程序Hello World

    安装NodeJs 在创建实际的“Hello,World!”应用之前,我们应该先安装NodeJS,安装NodeJS可以访问NodeJS官网,下载相应系统的NodeJS的安装包,进行安装. 程序组件 关于 ...

  2. (转)Linux使用RSA密钥登录远程服务器

    一切操作都在本机执行,不需要进入远程主机/服务器~~ 1.生成密钥.默认生成的是rsa加密. ssh-keygen 2.私钥是给本地的,公钥是给远程的.下面将公钥上传到远程服务器 ~ ssh-copy ...

  3. JS数组 组团（如何创建数组）var mychar = new Array( )

    组团,并给团取个名(如何创建数组) 使用数组之前首先要创建,而且需要把数组本身赋至一个变量.好比我们出游,要组团,并给团定个名字"云南之旅". 创建数组语法: var myarra ...

  4. 在双重for循环内部使用async异步请求axios中遇到的问题

    在methods中的方法 async getPro () { let _this = this let newArr = [] await axios.get(`api/v1/dailyProTbms ...

  5. [转]关于 MVVMLight 设计模式系列

    关于 MVVMLight 设计模式系列 http://www.wxzzz.com/958.html MvvmLight框架使用入门 http://www.cnblogs.com/manupstairs ...

  6. IDA*算法——骑士精神

    例题 骑士精神 Description 在一个5×5的棋盘上有12个白色的骑士和12个黑色的骑士, 且有一个空位.在任何时候一个骑士都能按照骑士的走法(它可以走到和它横坐标相差为1,纵坐标相差为2或者 ...

  7. Dubbo Ecosystem - 从微服务框架到微服务生态

    从微服务框架到微服务生态,这是微服务发展的必然趋势,也是Dubbo社区满足开发者更高效的构建微服务体系期望的使命和担当. 近期,Apache Dubbo PPMC 望陶(社区昵称:ralf0131)做 ...

  8. Python-函数基础(2)

    目录 可变长参数 形参 实参 函数对象 函数嵌套 名称空间与作用域 名称空间 内置名称空间 局部名称空间 全局名称空间 执行顺序 搜索顺序 作用域 全局作用域 局部作用域 global nonloca ...

  9. webpack引入jQuery

    1. 本地文件引入 配置 const webpack=require('webpack'); module.exports={ resolve:{ alias:{ //绝对路径 jQuery:path ...

  10. PKUSC2019 D2T2

    PKUSC2019 D2T2 把n(n<=100)的树(无边权)放在m维空间上(坐标都是整点),使得任意两个点的曼哈顿距离都是原树上的距离 求最小的m,并给出构造方案 性质好题,巧妙构造题. 原 ...