jq实现点击开关

最新推荐文章于 2024-04-16 02:52:27 发布

木木木和小琳琳

最新推荐文章于 2024-04-16 02:52:27 发布

阅读量298

点赞数

文章标签： jquery Powered by 金山文档

本文链接：https://blog.csdn.net/qq_19820589/article/details/129647400

版权

开关是同一个事物控制两种不同的状态，开关是唯一的，但是内容是改变的例如：开和关的切换，本来为开的状态，点击切换为关的状态，开关随意切换。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>jquery实现开关按钮</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style>
        .div1{
            width: 60px;
            height: 26px;
            border-radius: 15px;
            overflow: hidden;
            position: relative;
        }
        .div1 .left{
            position: absolute;
            left:4px;
        }
        .div1 .right{
            position: absolute;
            right:4px;
        }
        .div2{
            width: 30px;
            height: 20px;
            border-radius: 9px;
            background: #fff;
            position: absolute;
        }
        .open1{
            background: #ddd;
        }
        .open2{
            top: 3px;
            left: 5px;
        }
        .close1{
            width: 60px;
            height: 26px;
            border-radius: 15px;
            overflow: hidden;
            position: relative;
            background: #659dea;
        }
        .close2{
            left: 25px;
            top: 3px;
        }
    </style>
</head>
<body>
    <div class="div1 open1">
        <span class="left"></span>
        <span class="right"></span>
        <div class="div2 open2"></div>
    </div>
 
<script>
    $(function(){
        $(".div2").on('click',function() {
            // console.log('className======='+$(this).parent().get(0).className)
            $(this).parent().toggleClass('close1');
            $(this).parent().toggleClass('open1');
            $(this).toggleClass('close2');
            $(this).toggleClass('open2');
        })
    });
</script>
 
</body>
</html>