# addClass() / removeClass()

> $("선택자").addClass("클래스 이름");\
> $("선택자").removeClass("클래스 이름");

```markup
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQueray02 선택자</title>
    <style>
        @font-face {
            font-family: 'NEXON Lv2 Gothic';
            src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv2 Gothic.woff') format('woff');
            font-weight: normal;
            font-style: normal;
        }
        body {font-family: 'NEXON Lv2 Gothic';}
        li.red {color:#c7254e; background: #f9f2f4; border: 1px dashed #a51a3d;}

    </style>
</head>
<body>

    <h1>탐색</h1>
    <ul>
        <li>addClass() 메서드는 선택한 요소에 클래스를 생성하고, removeClass() 메서드는 선택한 요소에서 지정한 클래스를 삭제합니다.</li>
        <li>toggleClass() 메서드는 선택한 요소에 지정한 클래스가 없으면 생성하고, 있는 경우에는 삭제합니다.</li>
        <li>hasClass() 메서드는 선택한 요소에 지정한 클래스가 있으면true를 반환하고, 없으면 false를 반환합니다.</li>
    </ul>
    <button class="btn1">addClass()</button>
    <button class="btn2">removeClass()</button>
    <button class="btn3">toggleClass()</button>
    
     <!-- script -->
     <script src="jquery.min_1.1.24.js"></script>
     
    <script>
        // $("li:odd").css({backgroundColor: "red", color: "#fff"});
        // $("li:nth-child(2)").css({backgroundColor: "red", color: "#fff"});
        // $("li:contains('toggle')").css({backgroundColor: "red", color: "#fff"});
        // $("li:eq(1)").css({backgroundColor: "red", color: "#fff"});
        // $("li:nth-of-type(2)").css({backgroundColor: "red", color: "#fff"});
        // $("li:nth-child(even)").css({backgroundColor: "red", color: "#fff"});
        // $("li:nth-child(2n)").css({backgroundColor: "red", color: "#fff"});

        $(".btn1").click(function(){
            // $("li:odd").css("backgroundColor", "red");
            $("li:odd").addClass("red");
        });

        $(".btn2").click(function(){
            $("li:odd").removeClass("red");
        });

        $(".btn3").click(function(){
            $("li:odd").toggleClass("red");
        });

    </script>

</body>
</html>
```

## addClass를 이용한  탭 메뉴&#x20;

```markup
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQueray01 연동하기</title>
    <style>
        * {margin: 0; padding: 0;}
        ul {list-style: none;}
        a {text-decoration: none; color: #fff;}
        #tab-menu {width: 500px; margin: 50px auto; background: #ccc;}
        #tab-btn {}
        #tab-btn ul {overflow: hidden;}
        #tab-btn li {float: left; width: 20%; text-align: center;}
        #tab-btn li a {display: block; padding: 20px; background: #1e88e5;}
        #tab-cont {width: 500px; height: 334px;}
        #tab-cont.img1 {background: url(img/img01.jpg) no-repeat; background-size: contain;}
        #tab-cont.img2 {background: url(img/img02.jpg) no-repeat; background-size: contain;}
        #tab-cont.img3 {background: url(img/img03.jpg) no-repeat; background-size: contain;}
        #tab-cont.img4 {background: url(img/img04.jpg) no-repeat; background-size: contain;}
        #tab-cont.img5 {background: url(img/img05.jpg) no-repeat; background-size: contain;}

    </style>
</head>
<body>

    <div id="tab-menu">
        <div id="tab-btn">
            <ul>
                <li><a href="#">Tab1</a></li>
                <li><a href="#">Tab2</a></li>
                <li><a href="#">Tab3</a></li>
                <li><a href="#">Tab4</a></li>
                <li><a href="#">Tab5</a></li>
            </ul>
        </div>
        <div id="tab-cont" class="img1"></div>
    </div>

    <!-- script -->
    <script src="jquery.min_1.1.24.js"></script>
    <script> 
       //글씨를 클릭하면 경고창
       $("#tab-btn li:eq(0) a").click(function(){
           $("#tab-cont").removeClass().addClass("img1");
       }); 
       $("#tab-btn li:eq(1) a").click(function(){
           $("#tab-cont").removeClass().addClass("img2");
       }); 
       $("#tab-btn li:eq(2) a").click(function(){
           $("#tab-cont").removeClass().addClass("img3");
       }); 
       $("#tab-btn li:eq(3) a").click(function(){
           $("#tab-cont").removeClass().addClass("img4");
       }); 
       $("#tab-btn li:eq(4) a").click(function(){
           $("#tab-cont").removeClass().addClass("img5");
       }); 
    </script>

</body>
</html>
```

{% embed url="<https://limnangman96.github.io/dothome1/jquery/jquery06_addClass(2).html>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://dnjsdl678.gitbook.io/jquery/undefined-3/addclass.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
