×

jQuery多按钮单击变色

作者:Terry2017.06.05来源:Web前端之家浏览:13814评论:0
关键词:JQueryJS

这个小特效代码很简单,就不多做说明了,直接奉上源码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery多按钮单击变色 - Web前端之家</title>
    <style type="text/css">
        .start
        {
            cursor:pointer;
            color:Green;   
        }
        .end
        {
            cursor:pointer;
            color:Red;
        }
    </style>
</head>
<body>
<span onclick="dj(this)">LoveOne</span>
<span onclick="dj(this)">LoveTwo</span>
<span onclick="dj(this)">LoveThree</span>
<span onclick="dj(this)">LoveFour</span>
<script src="/demo/js/jquery-2.2.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
    //加载事件
    $(function () {
        var collection = $(".flag");
        $.each(collection, function () {
            $(this).addClass("start");
        });
    });
    //单击事件
    function dj(dom) {
        var collection = $(".flag");
        $.each(collection, function () {
            $(this).removeClass("end");
            $(this).addClass("start");
        });
        $(dom).removeClass("start");
        $(dom).addClass("end");
    }
</script>
</body>
</html>

是不是很简单,特效也很好玩,小伙伴们可以自由发挥下,可扩展性还是很强的。

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/biji119.html

网友评论文明上网理性发言 已有0人参与

发表评论: