<!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. 小程序跳转传参参数值为url时参数丢失

    通过先encodeURIComponent,取到值以后再decodeURIComponent,拼接参数正常传递 A页面 switch: function (e) { var aa = 'UNNZVUf ...

  2. 异常处理记录: Unable to compile class for JSP

    出错信息截图: 经过搜索引擎的帮助, 发现这些引发异常的可能原因: 1. tomcat的版本必须大于等于JDK的版本 2. maven中的jar与tomcat中jar冲突 看看pom.xml, 果然j ...

  3. csp-s模拟测试55 联，赛，题题解

    题面:https://www.cnblogs.com/Juve/articles/11610969.html 联: 用线段树维护区间和,要修改成1或0就线段树修改区间和 如果是异或,那么新的区间和就是 ...

  4. linux mysql备份shell

    #!/bin/bash # Shell script to backup MySql database # Author: Henry he # Last updated: -- # crontab ...

  5. x64：x64

    ylbtech-x64:x64 “x86-64”,有时会简称为“x64”,是64位微处理器架构及其相应指令集的一种,也是Intel x86架构的延伸产品.“x86-64”1999由AMD设计,AMD首 ...

  6. 实用的 JavaScript 调试小技巧

    ‘debugger;’ 除了console.log,debugger就是另一个我很喜欢的快速调试的工具,将debugger加入代码之后,Chrome会自动在插入它的地方停止,很像C或者Java里面打断 ...

  7. 力扣算法题—146LRU缓存机制

    [题目] 运用你所掌握的数据结构,设计和实现一个  LRU (最近最少使用) 缓存机制.它应该支持以下操作: 获取数据 get 和 写入数据 put . 获取数据 get(key) - 如果密钥 (k ...

  8. java日志管理 - slf4j+log4j2

    1 . 概述 1.1  日志框架实现 log4j是apache实现的一个开源日志组件: logback同样是由log4j的作者设计完成的,拥有更好的特性,用来取代log4j的一个日志框架,是slf4j ...

  9. springmvc-高级参数绑定-映射-异常-json数据交互-拦截器

    1.1. 高级参数绑定 1.1.1. 复制工程 把昨天的springmvc-web工程复制一份,作为今天开发的工程 复制工程,如下图: 粘贴并修改工程名为web2,如下图: 工程右键点击,如下图: 修 ...

  10. Spring Cloud Eureka 使用外网IP和端口号进行服务注册

    应用场景如下: 服务提供方(即要注册到服务中心的服务)的内网地址,外界无法访问(或者使用docker等做了应用端口等的配置),做了IP映射后,公网IP49.10.22.106映射到服务提供方的内网ip ...