效果：
条件：需要导入jquery文件
原文：https://www.cnblogs.com/nyah/p/7019111.html
原文有两种
1.无js实现
2.jquery实现 （他原来的第二种不够完美只能单独使用，如果是循环输出的有多行的话就会出问题，修改一个开关另一个开关也被修改，我进行了修改，可以直接拿去用了）
修改后如图：（开关互不影响）
代码在此：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="js/jquery-2.2.3.min.js"></script> <style type="text/css"> .cw-switch{display:inline-block;width:48px;height:24px;line-height:22px;border-radius:24px;vertical-align:middle;border:1px solid #ccc;background-color:#ccc;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:all .2s ease-in-out} .cw-switch-inner{color:#fff;font-size:12px;position:absolute;left:25px} .cw-switch:after{content:'';width:20px;height:20px;border-radius:20px;background-color:#fff;position:absolute;left:1px;top:1px;cursor:pointer;transition:left .2s ease-in-out,width .2s ease-in-out} .cw-switch:active:after{width:26px} .cw-switch-checked{border-color:#39f;background-color:#39f} .cw-switch-checked .cw-switch-inner{left:8px} .cw-switch-checked:after{left:25px}.cw-switch-checked:active:after{left:19px} .cw-switch-disabled{cursor:not-allowed;background:#f3f3f3;border-color:#f3f3f3} .cw-switch-disabled:after{background:#ccc;cursor:not-allowed}.cw-switch-disabled .cw-switch-inner{color:#ccc} </style> </head> <body> <div id="useswitch" class="cw-switch cw-switch-checked"> <div class="cw-switch-inner"> <span id="word">开</span> </div> </div> <script type="text/javascript"> $(function(){ $("[id = useswitch]").click(function(event) { if($(this).hasClass('cw-switch-checked')){ $(this).find("#word").text('关'); }else{ $(this).find("#word").text('开'); } $(this).toggleClass('cw-switch-checked'); }); }) </script> </body> </html>
