开关效果
<style>
/*关闭状态*/
.news_box{width:100%;height:2rem;margin-bottom:15px;}
.dashDiv{
float: right;
border-radius: 1rem;
background-color: #cbcbcb;
width: 3.2rem;
height: 1.65rem;
margin-top: 0.2rem;
margin-right: 0.4rem;
box-sizing: border-box;
transition: 1s;
position: absolute;
right: 0;
}
.dashDiv .dashSpan{
border-radius: 50%;
border: 1px solid #FFFFFF;
background-color: #FFFFFF;
float: left;
width: 1.5rem;
height: 1.5rem;
box-sizing: border-box;
margin-top: 0.0704rem;
margin-left: 0.0704rem;
}
/*开通状态*/
.dashDivSelectd{
background-color: #4cd964;
transition: 1s;
border-radius: 1rem;
width: 3.2rem;
height: 1.65rem;
margin-top: 0.2rem;
margin-right: 0.4rem;
position: absolute;
right: 0;
float: right;
box-sizing: border-box;
}
.dashDivSelectd .dashSpan{
border-radius: 50%;
float: right;
margin-right: 0.0704rem;
border: 1px solid #FFFFFF;
background-color: #FFFFFF;
width: 1.5rem;
height: 1.5rem;
box-sizing: border-box;
margin-top: 0.0704rem;
}
</style>
<div class="news_box" id="cue">
<div class="dashDiv">
<a class="dashSpan" href="javascript:;"></a>
</div>
</div>
<div class="news_box" id="cue1">
<div class="dashDiv">
<a class="dashSpan" href="javascript:;"></a>
</div>
</div>
<script>
function hasClass(obj, cls) {
return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(obj, cls) {
if (!hasClass(obj, cls)) obj.className += " " + cls;
}
function removeClass(obj, cls) {
if (hasClass(obj, cls)) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
obj.className = obj.className.replace(reg, ' ');
}
}
function toggleClass(obj,cls){
if(hasClass(obj,cls)){
removeClass(obj,cls);
}else{
addClass(obj,cls);
}
}
function hint(target){
var Cue = document.getElementById(target);
var DashDiv =Cue.getElementsByClassName("dashDiv")[0];
var DashSpan =Cue.getElementsByClassName("dashSpan")[0];
var Success =Cue.getElementsByClassName("success")[0];
DashSpan.onclick =function(){
toggleClass(DashDiv,"dashDivSelectd");
}
}
// 调用
hint("cue");
hint("cue1");
</script>