最近在写项目的时候想要一个这样的效果，
我知道这个效果在 flat-ui中有， 但是我又不想引用一整个flat-ui;
这个效果依赖html5的transition， 所以浏览器兼容成问题；
从flat-ui中把这个效果的js和html，以及css给拨离出来；
整体的代码如下：
运行下面代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title></title> </head> <body> <h1> toggle的demo </h1> <style> .toggle { background-color: #8AB9E3; border-radius: 60px; color: white; height: 29px; margin: 5px 12px 12px 0; overflow: hidden; *zoom: 1; display: inline-block; zoom: 1; *display: inline; -webkit-transition: 0.25s; -moz-transition: 0.25s; -o-transition: 0.25s; transition: 0.25s; -webkit-backface-visibility: hidden; -webkit-box-sizing: initial } .toggle:before, .toggle:after { display: table; content: ""; } .toggle:after { clear: both; } .toggle.toggle-off { background-color: #cbd2d8; } .toggle.toggle-off .toggle-radio { /*background-image: url("../images/icon-off.png")*/; background-position: 0 0; color: white; left: 0; margin-left: 0.5px; margin-right: -13px; z-index: 1; } .toggle.toggle-off .toggle-radio:first-child { left: -120%; } .toggle .toggle-radio { /*background: url("../images/icon-on.png") right top no-repeat;*/ color: #0275d8; display: block; font-weight: 700; height: 21px; left: 120%; margin-left: -13px; padding: 5px 32px 3px; position: relative; text-align: center; z-index: 2; -webkit-transition: 0.25s; -moz-transition: 0.25s; -o-transition: 0.25s; transition: 0.25s; -webkit-backface-visibility: hidden; } .toggle .toggle-radio:first-child { margin-bottom: -29px; left: 0; } .toggle input { display: none; position: absolute; outline: none !important; display: block9; opacity: 0.01; filter: alpha(opacity=1); zoom: 1; } .toggle.toggle-icon { border-radius: 6px 7px 7px 6px; } .toggle.toggle-icon.toggle-off { border-radius: 7px 6px 6px 7px; } .toggle.toggle-icon.toggle-off .toggle-radio { /*background-image: url("../images/block-off.png");*/ background-position: 0 0; } .toggle.toggle-icon .toggle-radio { /*background-image: url("../images/block-on.png");*/ background-position: 62px 0; border-radius: 6px; min-width: 27px; text-align: right; } .toggle.toggle-icon .toggle-radio:first-child { text-align: left; } </style> <div> <label for="toggleOption2">ON</label> <input type="radio" name="toggleOptions" id="toggleOption1" value="option1" checked="checked"> <label for="toggleOption1">OFF</label> <input type="radio" name="toggleOptions" id="toggleOption2" value="option2"> </div> <script src="http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.js"></script> <script> //toggle插件的js代码 var toggleHandler = function(toggle) { var toggle = toggle; var radio = $(toggle).find("input"); var checkToggleState = function() { if (radio.eq(0).is(":checked")) { $(toggle).removeClass("toggle-off"); } else { $(toggle).addClass("toggle-off"); } }; checkToggleState(); radio.eq(0).click(function() { $(toggle).toggleClass("toggle-off"); }); radio.eq(1).click(function() { $(toggle).toggleClass("toggle-off"); }); }; $(".toggle").each(function(index, toggle) { toggleHandler(toggle); }); </script> </body> </html>
整体的效果是依赖于jQuery， 当用户点击了label按钮会触发input的click事件， 然后判断给父级添加不同的classname；