状态框转换状态
<!doctype> <html> <head> <meta charset="utf-8"> <script src = "jquery.min.js"></script> </head> <style type="text/css"> .turn-btn { float: left; margin-right: 10px; } .turn-on-btn { border: 2px solid #6FB440; border-radius: 4px; cursor: pointer; display: block; height: 16px; position: relative; width: 60px; } .turn-on-btn .cell { background-color: #6FB440; height: 16px; position: absolute; right: 0; width: 30px; } .turn-off-btn { border: 2px solid #c1c1c1; border-radius: 4px; cursor: pointer; display: block; height: 16px; position: relative; width: 60px; } .turn-off-btn .cell { background-color: #c1c1c1; height: 16px; position: absolute; left: 0; width: 30px; } .status { float: left; } </style> <body> <a class="turn-btn turn-on-btn" data-type="Contractor"><span class="cell"></span></a> <span class="status">ON</span> </body> <script type="text/javascript"> $('.turn-btn').on('click', isShowBtn); var status = ''; function isShowBtn(event) { var is = ''; if ($(this).hasClass('turn-off-btn')) { is = 1; $(this).removeClass('turn-off-btn'); $(this).addClass('turn-on-btn'); $(this).siblings('.status').html('ON'); } else { $(this).removeClass('turn-on-btn'); $(this).addClass('turn-off-btn'); $(this).siblings('.status').html('OFF'); } status = is ? is : 0; } </script> </html>