• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>jQuery Style</title>
7
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
8
    <style>
9
        .lined {
10
            text-decoration: line-through;
11
            color: lightgray;
12
        }
13
    </style>
14
    <script>
15
        $(function() {
16
            $("button").on("click", function() {
17
                // id가 "first"와 "third"인 요소에 "lined"라는 클래스를 추가하고, 다시 한 번 클릭하면 제거함.
18
                $("#first, #third").toggleClass("lined");
19
            });
20
        });
21
    </script>
22
</head>
23
​
24
<body>
25
​
26
    <h1>클래스의 토글</h1>
27
    <p id="first">이 단락에 클래스를 추가해 보아요!</p>
28
    <p>이 단락에는 클래스를 추가하지 않아요!</p>
29
    <p id="third">이 단락에 클래스를 추가해 보아요!</p>
30
    <button>클래스 토글</button>
31
32
</body>
33
​
34
</html>