<!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. opencv编译：opencv 3.4.1 编译 contrib模块，增加人脸识别

    start cmake-gui select the opencv source code folder and the folder where binaries will be built (th ...

  2. 基于windows消息的响应USB插入或取出

    导语:当有设备进入windows时,系统会向所有的应用层发送WM_DEVICECHANGE消息.进一步根据相应的事件判断设备. LRESULT CALLBACK WndProc(HWND hWnd, ...

  3. localhost与127.0.0.1区别

    一.连接MySQL数据库有两种方式:TCP/IP(一般理解的端口的那种)和Unix套接字(一般叫socket或者sock) 大部分情况下,可以用localhost代表本机127.,但是在MySQL连接 ...

  4. 转：Eclipse中设置编码的方式

    来源:http://blog.csdn.net/jianw2007/article/details/3930915 如果要使插件开发应用能有更好的国际化支持,能够最大程度的支持中文输出,则最好使 Ja ...

  5. Linux 下的终端

    终端: 1 虚拟终端 ctrl + alt + F(1-6) : ctrl + alt + F7 : 图形终端 启动图形终端 : Gnome  :  #startx   或者  #startx &am ...

  6. PKU--1267 Cash Machine(多重背包)

    题目http://poj.org/problem?id=1276 分析 这是一个多重背包的问题,可以把请求的金额当作背包的重量,而货币的面值就是价值又是重量. 于是这个问题便很好理解背包了. #];; ...

  7. Node中js获取异步操作的结果

    js中要获取异步操作的结果必须使用回调函数 回调函数也被称为高阶函数,简单来说就是,函数作为一个参数传到另一个主函数里面,当那一个主函数执行完之后,再执行传进去的作为参数的函数 function fn ...

  8. intellij idea中去除@Autowired注入对象带来的下划线提示

    场景: idea中通过@Autowired注入的对象一直有下划线提示,虽然不影响运行 解决:改变@Autowired的检查级别即可. 快捷键:Ctrl+Alt+s,进入idea设置界面,输入inspe ...

  9. 网络结构解读之inception系列四：Inception V3

    网络结构解读之inception系列四:Inception V3   Inception V3根据前面两篇结构的经验和新设计的结构的实验,总结了一套可借鉴的网络结构设计的原则.理解这些原则的背后隐藏的 ...

  10. let和const的一些知识点

    let和const 不可以重复声明 不会发生变量提升,因此必须在声明之后使用,否则报错! 只在声明所在的块级作用域内有效 let 同一个作用域内不能重复声明同一个变量: function func() ...