<div class="current"></div>
div {
        width: 150px;
        height: 150px;
        background-color: pink;
        margin: 100px auto;
        transition: all 0.5s;
    }

    .current {
        background-color: red;
        transform: rotate(360deg);
    }
    $(function () {
            // 1. 添加类 addClass()
            // $("div").click(function() {
            //     // $(this).addClass("current");
            // });
            // 2. 删除类 removeClass()
            // $("div").click(function() {
            //     $(this).removeClass("current");
            // });
            // 3. 切换类 toggleClass()
            $("div").click(function () {
                $(this).toggleClass("current");
            });
        })

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js