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开关按钮,交替作用隐藏 ...
随机推荐
- 第二章计算机网络ios 模型
机构: ISO国际标准化组织: ITU国际电信联盟: ANSI 美国国家标准委员会: ECMA欧洲计算机制作商协会 ITEF因特网特别任务组. 协议:为计算机网路中进行数据交换而建立的规则,标准或约定 ...
- duilib教程之duilib入门简明教程5.自绘标题栏
如果大家有做过标题栏的自绘,肯定会感慨各种不容易,并且现有的一些资料虽然完美的实现了功能,但是代码比较乱,需要自行整理.如果用duilib,就是小case啦. duilib其实并没有区分标题栏和 ...
- js摇一摇事件
今早同事过来说.要做个小游戏.里面有个摇一摇动作. 平时都是做的手机营销h5比较少. 发现很有意思. 一时间没有反应过来. 怎么实现的摇一摇. 现在吧代码叠出来给2货的我. //运动事件监听if ...
- Template-Thymeleaf：Thymeleaf
ylbtech-Template-Thymeleaf:Thymeleaf 1.返回顶部 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 0. https://www.thyme ...
- kafka分析
目录 1,kafka简介 2, Kafka Server 2.1,kafka中zookeeper的作用 2.2, Broker 2.2.1,Broker高性能设计 2.2.2,Broker选举机制 2 ...
- PLSQL远程访问Oracle数据库配置
PLSQL远程访问Oracle数据库的配置 监听器(LISTENER) :监听器是Oracle基于服务器端的一种网络服务,主要用于监听客户端向数据库服务器端提出的连接请求.既然是基于服务器端的服务,那 ...
- 2019-8-31-C#-性能分析-反射-VS-配置文件-VS-预编译
title author date CreateTime categories C# 性能分析 反射 VS 配置文件 VS 预编译 lindexi 2019-08-31 16:55:58 +0800 ...
- NoSQL 列族数据库
- At- Linux必学的60个命令
1.作用 at命令用来在指定时刻执行指定的命令序列. 2.格式 at [-V] [-q x] [-f file] [-m] time 3.主要参数 -V:显示标准错误输出. -q:许多队列输出. -f ...
- 汇编语言LAHF和SAHF指令
LAHF(加载状态标志位到 AH)指令将 EFLAGS 寄存器的低字节复制到 AH.被复制的标志位包括:符号标志位.零标志位.辅助进位标志位.奇偶标志位和进位标志位.使用这条指令,可以方便地把标志位副 ...