html:
<div>
<div class="on-off-off on-off">
<span>off</span>
<div class="kgYuan"></div>
</div>
<div class="on-off-on on-off isHide">
<div class="kgYuan"></div>
<span>on</span>
</div>
</div>
css樣式:
.on-off {
width: 50px !important;
border: 1px solid #333;
border-radius: 20px;
display: flex;
justify-content: space-between;
line-height: 20px;
margin-top: 12px;
font-size: 12px;
}
.on-off-off {
padding: 2px 2px 2px 10px;
color: #fff;
background: -webkit-linear-gradient(-90deg, #81afcf, #3a6c9e); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(180deg, #81afcf, #3a6c9e); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(180deg, #81afcf, #3a6c9e); /* Firefox 3.6 - 15 */
background: linear-gradient(180deg, #81afcf, #3a6c9e); /* 标準的文法 */
}
.on-off-on {
background: #fff;
padding: 2px 10px 2px 2px;
color: #000 !important;
}
.kgYuan{
width: 18px !important;
height: 18px;
background: #fff;
border: 1px solid #333;
border-radius: 14px;
margin-top: 0 !important;
}
.isHide{
display: none;
}
jquery:
$(".on-off").on('click',function(){
if($(".on-off-off").hasClass("isHide")){
$(".on-off-off").removeClass("isHide");
$(".on-off-on").addClass("isHide");
}else{
$(".on-off-off").addClass("isHide");
$(".on-off-on").removeClass("isHide");
}
});
樣式: