<div class="ios-switch">
飞行模式
<span class="switch-bg switch-off">
</span>
</div>
.switch-bg {
width: 60px;
height: 30px;
border-radius: 20px;
display: block;
border: 1px solid #dddddd;
position: relative;
cursor: pointer;
background: #dddddd;
}
.switch-off::after {
content: "";
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
background: #ffffff;
left: 0;
}
.switch-on::after {
content: "";
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
background: #ffffff;
right: 0;
}
$(".switch-bg").click(function () {
if ($(this).hasClass("switch-off")) {
$(this).removeClass("switch-off").addClass("switch-on");
$(".switch-bg").css("background","#6C49B8");
console.log("已打开飞行模式");
} else if ($(this).hasClass("switch-on")) {
$(this).removeClass("switch-on").addClass("switch-off");
$(".switch-bg").css("background","#dddddd");
console.log("已关闭飞行模式");
}
})