• 开关效果


    <style>
             /*关闭状态*/
    .news_box{100%;height:2rem;margin-bottom:15px;}
    .dashDiv{
       float: right;
        border-radius: 1rem;
        background-color: #cbcbcb;
        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;
        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;
        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;
        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>

  • 相关阅读:
    v-charts 绘制柱状图、条形图、水球图、雷达图、折线图+柱状图,附官网地址
    vue-cli3 assets目录下的SASS文件中添加背景图片报错Module not found: Error: Can't resolve './@/assets/images/login.png'解决办法
    Vue UI 框架(pc、移动端)
    单页面应用 VS 多页面应用
    DOM重点核心总结
    JS之三种动态创建元素的区别
    DOM节点操作
    自定义属性
    CSS面试题
    CSS中定义变量,并使用变量设置属性值
  • 原文地址:https://www.cnblogs.com/water-wf/p/10949321.html
Copyright © 2020-2023  润新知