jquery实现on/off开关按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab</title>
<style>
*{margin:0;padding: 0}
ul,li{list-style: none;}
.active{
background: gray;
display: block;
}
.hide{display: none;}
ul{
overflow: hidden;
}
ul li{
width:50px;
height: 50px;
float: left;
border-radius: 3px;
text-align: center;
line-height: 50px;
}
.dis{display:block;}
.dis1{display:none;}
</style>
<script src="jquery-1.8.3.min.js"></script>
</head>
<body>
<div class="container">
<ul class="tabs">
<li class="active">on</li>
<li id="off">off</li>
</ul>
<div id="tab1" class="dis">2111111111111111111111111</div>
</div>
<script>
$(document).ready(function(){
$(".tabs li").click(function(){
$(".tabs li").removeClass("active");
$(this).addClass("active");
if($("#tab1").hasClass("dis")){
$("#tab1").removeClass("dis");
$("#tab1").addClass("dis1");
}
else
{
$("#tab1").removeClass("dis1");
$("#tab1").addClass("dis");
}
});
})
</script>
</body>
</html>
jquery实现on/off开关按钮的更多相关文章
- 巧妙利用jQuery和PHP打造类似360安全卫士防火墙功能开关(类似iphone界面)效果
安全卫士防火墙开启关闭的开关,可以将此功能应用在产品功能的开启和关闭功能上. 准备工作为了更好的演示本例,我们需要一个数据表,记录需要的功能说明及开启状态,表结构如下: CREATE TABLE `p ...
- 基于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滑动开关按钮效果
效果图: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- light7结合jquery实现开关按钮
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- jquery开关按钮效果
.circular1{ width: 50px; height: 30px; border-radius: 16px; background-color: #ccc; transition: .3s; ...
随机推荐
- Nim Game
简单规律: 如果你面前的石子数为1,2,3必赢 4必输: 所以4+1(5),4+2(6),4+3(7)你必赢,因为你总是有办法让对方面对4,而前面分析过了4是必输的: 所以当你面对n的时候,如果n-1 ...
- mysql登陆问题
1.centos6下mysql5.7的登陆问题 问题的描述:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using p ...
- sql常用单行函数
学到数据库了,小记一下的喽~~~>>>>常用的单行函数 select * from employees 查询所有 select first_name,lower(first_n ...
- 一个ubuntu phper的自我修养(ubuntu安装)
ubuntu安装篇 一.ubuntu下载 到ubuntu官网下载适合自己电脑配置的系统版本,此处不做展开. 二.制作USB启动盘 在windows下制作USB启动盘,工具是universal usb ...
- ML-分类与逻辑回归
布尔分类(binary classification)问题: 训练集:$S=\{(x^{(i)}, y^{(i)})\}$ 输入:特征向量$x$ 期望输出:$y\in\{0, 1\}$ 这里使用的假设 ...
- GOAndroid的安装和配置
android环境的配置还是比较复杂的,特别对于我这样一直使用mfc的程序员来说,有很多观念上需要转变.好在配置成功后就能够不断复用,那么这样的问题值得整理出来 一.安装jdk 二.解压adt-bun ...
- jvisualvm参数配置
1.java 命令启动 nohup java -Dlocalcfg=true -Dcom.sun.management.jmxremote.port=9998 -Dcom.sun.management ...
- <<Windows via C/C++>>学习笔记 —— 线程优先级【转】
转自:http://www.cnblogs.com/wz19860913/archive/2008/08/04/1259807.html 每个线程都有一个“优先级”,范围是0-31,0为最低优先级,3 ...
- 关于去除Eclipse对JavaScript的验证
关于去除Eclipse对JavaScript的验证 在我们使用大量JavaScript作为一些UI或其他组件来使用时,很多情况下,明明引用的这些JavaScript是可以正常使用的,但Eclipse却 ...
- ma60笔记
60日均线是股价的生命线,跌破生命线就有一定的下跌空间.大 盘指数也有这种规律,当指数跌破60日平均线后,意味着大盘有一定的下跌空间.大盘指数是由所有个股价格加权统计后产生的,而个股价格却有很大的差异 ...