<!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. umount：将文件设备卸载

    [root@centos57 ~]# umount /dev/hda1 用设备文件名来卸载 [root@centos57 ~]# umount /aixi                     用挂 ...

  2. js怎样把URL链接的参数截取出来

    有时候,A页面参数需要传递到B页面,则把参数拼接到跳转B页面的url上,这时怎样在另一个页面截取A页面传递的参数呢,主要代码如下 /** * 获取指定的URL参数值 URL:http://www.qu ...

  3. java实践经验几种常见数据库连接池的使用比较

    经历的几个产品及项目中,包括了各种数据库及应用服务器,基本上几种常见的数据库连接池都用到了,根据使用的情况把这些连接池比较一下吧.(http://m.0834jl.com) 感觉在介绍之前有必要阐述一 ...

  4. LinkedHashMap笔记

    一.最基本元素存储单元 /** * HashMap.Node subclass for normal LinkedHashMap entries. */ static class Entry<K ...

  5. C++ Builder VCL库函数简介

    C++ Builder VCL库函数简介 2002-07-05· · ··C++builder资源中心 1 2 3 下一页 一.BORLAND C++ BUILDER VCL的内存管理函数 1. Al ...

  6. VS2010文件包含

    一. 关于iostream.h VS2010的iostream不加.h在后面(加.h的是旧版本),把iostream作为类,正确使用方法: #include<iostream> using ...

  7. 更改git提交显示的用户名

    问题描述 同一项目多人开发难免会用到版本控制,最为流行的当属git.开发中出现一个小问题,每个人提交后显示的用户名,如下图 组长发话:把用户名都改成自己的名字! 这时发现用户名并不是自己的名字,怎么改 ...

  8. Cesium官方教程11--建模人员必读

    原文地址:https://cesium.com/blog/2014/12/15/gltf-tips-for-artists/ 这篇文章是Branden Coker, an artist from AG ...

  9. java主函数参数传递args

    a.javaJava应用程序的主入口方法main(String[] args),表示该方法需要接收一个字符串数组类型的参数, 如果该参数不指定,agrs接收的是null. 程序:   public C ...

  10. Python学习day43-数据库(多表关系)

    figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...