<!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;
60px;
}
.turn-on-btn .cell {
background-color: #6FB440;
height: 16px;
position: absolute;
right: 0;
30px;
}
.turn-off-btn {
border: 2px solid #c1c1c1;
border-radius: 4px;
cursor: pointer;
display: block;
height: 16px;
position: relative;
60px;
}
.turn-off-btn .cell {
background-color: #c1c1c1;
height: 16px;
position: absolute;
left: 0;
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>