SOURCE

console 命令行工具 X clear

                    
>
console
//切换按钮
		    $('.switch').each(function(e) {	
				$(this).click(function(){
			    if($(this).hasClass('off')){
				     $(this).addClass('on').removeClass('off');   
			    }else{
			     	$(this).addClass('off').removeClass('on'); 
			     }
			    })
			});
<div class="switch off"></div>
/*开关*/
.switch {
  position: relative;
  width: 58px;
  height: 26px;
  background-color: #dcdcdc;
  color: #000;
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
  display: inline-block;
}

.switch.off,
.switch.on {
  border-radius: 25px;
  cursor: pointer;
}
.switch.on{ background: #b763ff;}

.switch.off:before,
.switch.on:before {
  display: block;
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 3px;
  top: 2px;
  background: #fff;
  -webkit-transition: 0.6s;
  transition: all 0.6s;
  -webkit-transition-delay: 0.01s;
  transition-delay: 0.01s;
  border-radius: 50%;
  /*-moz-box-shadow: inset -8px -8px 6px -6px #c7960f;
  -webkit-box-shadow: inset -8px -8px 6px -6px #c7960f; 
  box-shadow: inset -8px -8px 6px -6px #c7960f;*/
}

.switch.off:after {
  display: block;
  position: absolute;
/*  content: "OFF";*/
  /*-o-transform: rotate(-270deg);
  -webkit-transform: rotate(-270deg);
  -ms-transform: rotate(-270deg);
  transform: rotate(-270deg);*/
  left: 5px;
  top: 8px;
}

.switch.on:before {
    left: -5px;
  -webkit-transform: translateX(38px);
  -ms-transform: translateX(38px);
  transform: translateX(38px);
}

.switch.on:after {
  position: absolute;
  /*content: "ON";*/
  left: 45px;
  top: 8px;
}