CSS开关按钮实现-优快云博客

<!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>

转载于:https://www.cnblogs.com/floraCnblogs/p/css-status-btn.html