java实现开关按钮_jquery实现on/off开关按钮

tab

*{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;}

• on
• off

2111111111111111111111111

$(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");

}

});

})

巧妙利用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的 ...

使用jQuery实现类似开关按钮的效果

转自:http://www.cnblogs.com/linjiqin/p/3148228.html 本案例实现类似开关按钮效果. 页面有下拉列表.文本框.按钮等表单元素,大致实现如下效果:1.页面一加 ...

jQuery滑动开关按钮效果

效果图: tf-8">

jquery开关按钮效果

.circular1{ width: 50px; height: 30px; border-radius: 16px; background-color: #ccc; transition: .3s; ...

随机推荐

eclipse无法导入Android工程的现象与解决办法

最近在新导入一个Android工程时遇见了已有工程无法导入的情况.具体的现象就是每次导入时的导入窗口很快消失,而在eclipse的package explorer中却没有增加新导入的工程文件夹,没有其 ...

Linux编程之《只运行一个实例》

概述 有些时候,我们要求一个程序在系统中只能启动一个实例.比如,Windows自带的播放软件Windows Medea Player在Windows里就只能启动一个实例.原因很简单,如果同时启动几个实 ...

poj 3728 The merchant 倍增lca求dp

题目: zdf给出的题目翻译: 从前有一个富饶的国度,在这里人们可以进行自由的交易.这个国度形成一个n个点的无向图,每个点表示一个城市,并且有一个权值w[i],表示这个城市出售或收购这个权值的物品.又 ...

SVM：从理论到OpenCV实践

(转载请注明出处:http://blog.csdn.net/zhazhiqiang/ 未经允许请勿用于商业用途)   一.理论 参考网友的博客: (1)[理论]支持向量机1: Maximum Marg ...

把某个asp.net 控件 替换成 自定义的控件

功能:可以把某个asp.net 控件 替换成 自定义的控件 pages 的 tagMapping 元素(ASP.NET 设置架构) 定义一个标记类型的集合,这些标记类型在编译时重新映射为其他标记类型. ...

About Undefined Behavior[译文]

原文:blog.llvm.org/2011/05/what-every-c-programmer-should-know.html 人们偶尔会问为什么LLVM的汇编代码有时会在优化器打开时产生SIGT ...

[HNOI2009]梦幻布丁 算法技巧之邻接链

题目描述 N个布丁摆成一行,进行M次操作.每次将某个颜色的布丁全部变成另一种颜色的,然后再询问当前一共有多少段颜色.例如颜色分别为1,2,2,1的四个布丁一共有3段颜色. 输入输出格式 输入格式: 第 ...

Erlang Rebar 使用指南之一：入门篇

Erlang Rebar 使用指南之一:入门篇 全文目录: https://github.com/rebar/rebar/wiki 本章原文: https://github.com/rebar/reb ...

macOS下appstore提示未能完成该操作的解决办法

macOS下App Store下载软件,提示:未能完成该操作.(com.apple.commerce.client 错误 500.) 解决办法: 在终端输入 defaults write com.ap ...

ionic3 创建项目至apk打包全过程教程

主要流程: 安装node.js  -->  安装jdk  -->  安装AndroidSDK  -->  安装cordova  -->  安装ionic -->  创建项 ...