开关效果

Posted 2021-12-11 water-wf

<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>