滑动开关

<script>

if ($(".slider").hasClass("sliderNot")) {

$(".sliderText").text("冻结")

}

if ($(".slider").hasClass("sliderOn")) {

$(".sliderText").text("开启")

}

$(".slider").click(function () {

if ($(this).hasClass("sliderOn")) {

$(this).removeClass("sliderOn").addClass("sliderNot")

$(".sliderText").text("冻结")

} else {

$(this).removeClass("sliderNot").addClass("sliderOn")

$(".sliderText").text("开启")

}

})

</script>

<span class="slider sliderNot">

<i class="slider-bar"></i>

</span>

<span class="sliderText"></span>

.slider {vertical-align: middle;cursor: pointer;position: relative;display: inline-block;width: 55px;height: 30px;border-top: 2px solid #DBE0E3;border-radius: 6px;background: #E4E8EA;}

.sliderOn {border-top: 2px solid #1EA554;border-radius: 6px;background: #2ECA74;}

.needOrNot {display: inline-block;width: 60px;vertical-align: middle;}

.slider i {position: absolute;top: 4px;left: 6px;display: inline-block;height: 20px;width: 20px;border-bottom: 2px solid #D2D8DC;border-radius: 4px;background: #fff;}

.sliderOn i {left: 30px;border-bottom: 2px solid #189748;border-radius: 4px;background: #fff;}

.sliderText{margin-left: 5px;}