状态框转换状态

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!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>

　　

posted @   李晓菲  阅读(169)  评论(0)  编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示