light7结合jquery实现开关按钮
<!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实现开关按钮的更多相关文章
- jQuery滑动开关按钮效果
效果图: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- 基于Bootstrap的jQuery开关按钮插件
按钮 下载 使用方法 首先要在页面中引入依赖文件: jquery.Bootstrap.Bootstrap Switch CSS和Bootstrap Switch JS.这里用的是bootstr ...
- 基于Bootstrap的超酷jQuery开关按钮插件
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAAA2CAIAAAC0tsfoAAAB/0lEQVR4nO3bQWrCQBTGcc/mbVz0DD
- 基于Bootstrap的jQuery开关按钮组合
Bootstrap是一款由Twitter推出的开源前端开发包,功能非常强大.今天我们要分享的这款jQuery开关按钮组合就是基于Bootstrap框架的,看了按钮的主题样式,也都是Bootstrap的 ...
- 【转】基于Bootstrap的超酷jQuery开关按钮插件
基于Bootstrap的超酷jQuery开关按钮插件
- 使用jQuery实现类似开关按钮的效果
转自:http://www.cnblogs.com/linjiqin/p/3148228.html 本案例实现类似开关按钮效果. 页面有下拉列表.文本框.按钮等表单元素,大致实现如下效果:1.页面一加 ...
- jquery实现on/off开关按钮
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- jquery开关按钮效果
.circular1{ width: 50px; height: 30px; border-radius: 16px; background-color: #ccc; transition: .3s; ...
- JQuery的一些简单操作01
一.JQuery的隐藏和显示效果 1.hide/show/toggle hide隐藏效果,hide(1000)括号里面跟毫秒,show显示效果同样后面括号可以有数值,toggle开关按钮,交替作用隐藏 ...
随机推荐
- JS规则 自加一,自减一 ( ++和- -) 【mynum = mynum + 1;//等同于mynum++;】
自加一,自减一 ( ++和- -) 算术操作符除了(+.-.*./)外,还有两个非常常用的操作符,自加一"++":自减一"--".首先来看一个例子: mynum ...
- 获取m,n之间的随机整数
获取m,n之间的随机整数 代码去下:
- 读《深入PHP 面向对象、模式与实践》笔记
1. include() 和require() 语句的不同在于它们如何处理错误.使用require()调用文件发生错误时,将会停止整个程序;调用include()时遇到相同的错误,则会生成警告并停止执 ...
- leetcode--81-搜索旋转排序数组②
题目描述: 33题 方法一: class Solution: def search(self, nums: List[int], target: int) -> bool: l, r = 0, ...
- html 引入公共的头部和底部
- python mysql数据库中 json的存储
首先数据库里的字段类型需要设置为json: 存储这个json时需要把这个json变为字符串,而且是最外层为单引号,内部字符串为双引号!如图: 所以python脚本中这个字段的字符串应该这样写: 得出 ...
- gatekeeper学习概述
1.概述 该产品部署在网络隔离装置两端,以代理程序的身份,完成两侧设备连接维护,数据转发的功能.场景简化如图所示: 软件核心是一个基于Netty的网络应用程序,考虑到系统的可维可测性,集成了web化的 ...
- Eclipse反编译插件jd-eclipse安装指南
Java Decompiler是一款比较好用的反编译工具,包括: JD-GUI:独立java编译工具 JD_Eclipse:用于Eclipse的反编译插件 下面主要介绍jd-eclipse的获取和安装 ...
- _itoa _itow _itot atoi atof atol
函数原型: char *_itoa( int value, char *string, int radix ); //ANSI wchar_t * _itow( int value, wchar_t ...
- 枚举进程,线程,堆 CreateToolhelp32Snapshot
Takes a snapshot of the processes and the heaps, modules, and threads used by the processes.对当前系统进行一 ...