html5 简单实用好看的滑动开关Jquery+css带效果图（无bug）

最新推荐文章于 2024-12-14 22:03:36 发布

我爱女神李忠英

最新推荐文章于 2024-12-14 22:03:36 发布

阅读量2.1k

点赞数 4

文章标签： css html5 jquery

本文链接：https://blog.youkuaiyun.com/ed679ed/article/details/130731112

版权

该文章提供了一个经过修改的jQuery实现，创建了可以独立操作的开关按钮，解决了原版代码在循环输出时导致的多个开关同步问题。通过CSS3和JavaScript，实现了按钮的切换效果以及文本(开/关)的动态更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：

条件：需要导入jquery文件

原文：https://www.cnblogs.com/nyah/p/7019111.html

原文有两种

1.无js实现

2.jquery实现（他原来的第二种不够完美只能单独使用，如果是循环输出的有多行的话就会出问题，修改一个开关另一个开关也被修改，我进行了修改，可以直接拿去用了）

修改后如图：（开关互不影响）

代码在此：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
    <style type="text/css">        

        .cw-switch{display:inline-block;width:48px;height:24px;line-height:22px;border-radius:24px;vertical-align:middle;border:1px solid #ccc;background-color:#ccc;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:all .2s ease-in-out}
        .cw-switch-inner{color:#fff;font-size:12px;position:absolute;left:25px}
    
        .cw-switch:after{content:'';width:20px;height:20px;border-radius:20px;background-color:#fff;position:absolute;left:1px;top:1px;cursor:pointer;transition:left .2s ease-in-out,width .2s ease-in-out}
        .cw-switch:active:after{width:26px}
        .cw-switch-checked{border-color:#39f;background-color:#39f}
        .cw-switch-checked .cw-switch-inner{left:8px}
        .cw-switch-checked:after{left:25px}.cw-switch-checked:active:after{left:19px}
        .cw-switch-disabled{cursor:not-allowed;background:#f3f3f3;border-color:#f3f3f3}
        .cw-switch-disabled:after{background:#ccc;cursor:not-allowed}.cw-switch-disabled .cw-switch-inner{color:#ccc}
    </style>
</head>
<body>
    <div id="useswitch" class="cw-switch cw-switch-checked">
        <div class="cw-switch-inner">
            <span id="word">开</span>
        </div>
    </div>

    <script type="text/javascript">
        $(function(){
           $("[id = useswitch]").click(function(event) {
                if($(this).hasClass('cw-switch-checked')){
                    $(this).find("#word").text('关');
                }else{
                    $(this).find("#word").text('开');
                }
                $(this).toggleClass('cw-switch-checked');
                
            });
        })
    </script>
</body>
</html>