样式：
点击第二个按钮，弹出回调函数。然后改变颜色。
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<link rel="stylesheet" href="t-Switch.css"></head><body><span class="switch switch-off" name="s_marketEnable" data-check="1" id="stwichBtn_1"></span><span class="switch switch-off" name="s_marketEnable" data-check="1" id="stwichBtn_2"></span><script src="jquery.min.js"></script><script src="switch-button.js"></script><script>// ???回调函数 ???function callback(dom) { ???????var id = dom.attr(‘id‘); ???????alert(id); ???}// ???基于name取dom元素 ???$(‘[name=s_marketEnable]‘).switchButton({callback:callback});</script></body></html>;(function ($) { ???$.fn.switchButton = function (options) { ???????var defaults = { ???????????target:$(this), ???????????callback:null ???????}; ???????var opts = $.extend({},defaults,options); ???????var _self = this; ???????????????var swtichBtn = { ???????????init:function () { ???????????????var _this = this; ???????????????// 如果是多个按钮 ???????????????if(opts.target.length >1){ ???????????????????$.map(opts.target,function (domEle,index) { ???????????????????????var id = $(domEle).attr(‘id‘); ???????????????????????if(!id){ ???????????????????????????id = "stwichBtn" + index ???????????????????????????$(domEle).attr(‘id‘,id); ???????????????????????} ???????????????????????$(‘#‘ + id).on(‘click‘,function () { ???????????????????????????_this.clickEvent(domEle); ???????????????????????}) ???????????????????}) ???????????????}else{ ???????????????????$(_self).on(‘click‘,function () { ???????????????????????_this.bindEvent(opts.target); ???????????????????}) ???????????????} ???????????}, ???????????clickEvent:function (domEle) { ?????????????????var _this = this; ?????????????????if($(domEle).hasClass(‘switch-on‘)){ ?????????????????????_this.off($(domEle)); ?????????????????}else{ ?????????????????????_this.on($(domEle)); ?????????????????} ???????????}, ???????????bindEvent:function (dom) { ???????????????var _this = this; ???????????????if(dom.hasClass(‘switch-on‘)){ ???????????????????_this.off(dom); ???????????????}else{ ???????????????????_this.on(dom); ???????????????} ???????????}, ???????????on:function (dom) { ???????????????dom.addClass(‘switch-on‘).removeClass(‘switch-off‘); ???????????????opts.callback && opts.callback(dom); ???????????}, ???????????off:function (dom) { ???????????????dom.addClass(‘switch-off‘).removeClass(‘switch-on‘); ???????????????opts.callback && opts.callback(dom); ???????????} ???????} ???????swtichBtn.init(opts); ???}})(jQuery);[class|=switch]{ ???display: block; ???position: relative; ???width: 50px; ???height: 20px; ???background-color: #ffffff; ???-webkit-border-radius:16px; ???-moz-border-radius:16px; ???border-radius:16px;}.switch:before { ???position: absolute; ???display: block; ???content: ‘‘; ???width: 19px; ???height: 19px; ???border:1px solid #bcbcbc; ???background-color: #fff; ???-webkit-border-radius:50%; ???-moz-border-radius:50%; ???border-radius:50%; ???cursor: pointer;}.switch-on { ???display: block; ???position: relative; ???width: 50px; ???height: 20px; ???background-color: #1a75ff; ???-webkit-border-radius:16px; ???-moz-border-radius:16px; ???border-radius:16px;}.switch-on:before{ ???left:30px; ???transition: background-color 0.4s, left 0.2s;}.switch-off:before{ ???left:0px; ???transition: background-color 0.4s, left 0.2s;}.switch-off { ???display: block; ???position: relative; ???width: 50px; ???height: 20px; ???background-color: #b0b0b0; ???-webkit-border-radius:16px; ???-moz-border-radius:16px; ???border-radius:16px;}jquery 按钮切换插件
原文地址：http://www.cnblogs.com/xiaoxiaossrs/p/7565318.html