效果图:
JSP代码:
<div class="product_s" style="font-weight:bold;">
<span id="text_deta">设备已开启</span>
<div id="button_box" class="open1">
<div id="slider" class="open2"></div>
</div>
</div>
JS代码:
window.onload=function(){
var slider=$("#slider");
var button_box=$("#button_box");
var text_deta=$("#text_deta");
slider.click(function() {
if(button_box.hasClass("close1")&&slider.hasClass("close2")){
button_box.attr("class", "open1");
slider.attr("class", "open2");
text_deta.html("设备已开启");
}else{
button_box.attr("class", "close1");
slider.attr("class", "close2");
text_deta.html("设备已关闭");
}
})
}
CSS代码
#button_box {
width: 0.8rem;
height: 0.43rem;
border-radius: 1rem;
position: relative;
float: right;
display: inline-block;
}
#slider {
width: 0.4rem;
height: 0.4rem;
border-radius: 1rem;
position: absolute;
background: white;
}
.open1 {
background: #5EB1FF;
}
.open2 {
top: 2px;
right: 1px;
}
.close1 {
background: rgba(255, 255, 255, 0.4);
border: 3px solid rgba(0, 0, 0, 0.15);
border-left: transparent;
}
.close2 {
left: 0px;
top: 0px;
border: 2px solid rgba(0, 0, 0, 0.1);
}