iphone 开启/关闭按钮

最新推荐文章于 2021-03-25 15:34:38 发布

上弦月Z

最新推荐文章于 2021-03-25 15:34:38 发布

阅读量470

点赞数

本文链接：https://blog.csdn.net/qq_37825370/article/details/80928927

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>开启/关闭按钮</title>
    <style>
        #div1{
            width: 45px;
            height: 30px;
            border-radius: 50px;
            position: relative;
        }
        #div2{
            width: 25px;
            height: 25px;
            border-radius: 48px;
            position: absolute;
            background: white;
            box-shadow: 0px 2px 4px rgba(0,0,0,0.4);
        }
        .open1{
            background: rgba(0,184,0,0.8);
        }
        .open2{
            top: 2px;
            right: 1px;
        }
        .close1{
            background: rgba(255,255,255,0.4);
            border:1px solid rgba(0,0,0,0.15);
            border-left: transparent;
        }
        .close2{
            left: 1px;
            top: 1px;
            border:1px solid rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <div id="div1" class="close1">
        <div id="div2" class="close2" οnclick="toogleStatus()"></div>
    </div>
</body>
<script>
    function toogleStatus() {
        var div2=document.getElementById("div2");
        var div1=document.getElementById("div1");

        div1.className=(div1.className=="close1")?"open1":"close1";
        div2.className=(div2.className=="close2")?"open2":"close2";
    }
</script>
</html>