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数组 团里添加新成员(向数组增加一个新元素)只需使用下一个未用的索引,任何时刻可以不断向数组增加新元素。myarray[5]=88;
团里添加新成员(向数组增加一个新元素) 上一节中,我们使用myarray变量存储了5个人的成绩,现在多出一个人的成绩,如何存储呢? 只需使用下一个未用的索引,任何时刻可以不断向数组增加新元素. my ...
- PyTorch中的C++扩展
今天要聊聊用 PyTorch 进行 C++ 扩展. 在正式开始前,我们需要了解 PyTorch 如何自定义module.这其中,最常见的就是在 python 中继承torch.nn.Module,用 ...
- loj2494 [hnoi2018]寻宝游戏
题意:给你n个元素的数组a.你可以在每个元素之前添加and和or的符号.每次询问最后变成r有多少种添号情况. n<=1000,m<=5000,q<=1000. 标程: #includ ...
- Django + Uwsgi + Nginx 的生产环境部署实战
目录 Django + Uwsgi + Nginx 的生产环境部署实战 安装Uwsgi 一.使用命令来启动django项目 二.使用配置文件来启动我们的Django项目 安装Nginx 配置Nginx ...
- centos 7 安装dotnet core
dotnetcore 支持的Linux 版本请看官网:https://docs.microsoft.com/zh-cn/dotnet/core/linux-prerequisites?tabs=net ...
- windows环境下,svn未备份情况下重新恢复
公司有个同事在未打招呼的情况下把公司服务器进行重新装系统,崩溃啊.SVN之前未备份,还好SVN的库(Repositories)还在,如下图: 恢复办法如下: 由于之前安装的就是VisualSVN-Se ...
- tty who 命令
#tty : 查看当前终端对应的终端的设备文件 #who : 查看当前系统登录的所有用户及其信息
- Delphi遍历进程-Win32API
本博客的Delphi代码使用的版本均为DelphiXE10.x 1.1 .枚举进程 通过进程名称获取指定的进程ID,代码很详细,不再赘述 unit Uuitls; interface uses TlH ...
- HDU--2602(0-1背包)
题目:http://acm.hdu.edu.cn/showproblem.php?pid=2602 分析:一个0-1背包问题.记得<背包九讲>的方法. dp[j]=max{dp[j],d ...
- C开发系列-指针
指针 通过一段简单的程序,引入指针的概念 #include <iostream> using namespace std; // changeValue函数的定义 void changeV ...