✨
JQuery
  • 제이쿼리
  • 제이쿼리 기본
  • 선택자
    • 기본 선택자
    • 계층 선택자
    • 속성 선택자
    • 기본 필터 선택자
    • 내용 필터 선택자
    • 보임 필터 선택자
    • 자식 요소 필터 선택자
    • 폼 요소 필터 선택자
  • 탐색
    • find() / filter()
    • each()/$.each()
  • 속성
    • position() / offset()
    • scrollTop() / scrollLeft()
    • addClass() / removeClass()
    • toggleClass()
    • hasClass()
    • Attr() / removeAttr()
  • 변경
    • append() / prepend ()
    • remove() / empty ()
    • text() / html()
  • 애니메이션
    • show() / hide()
    • fadeIn() / fadeOut()
    • slideUp() / slideDown()
    • animate()
  • 이벤트
Powered by GitBook
On this page

Was this helpful?

  1. 속성

addClass() / removeClass()

addClass() 메서드는 선택한 요소에 클래스를 생성하고, removeClass() 메서드는 선택한 요소에서 지정한 클래스를 삭제합니다.

PreviousscrollTop() / scrollLeft()NexttoggleClass()

Last updated 4 years ago

Was this helpful?

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

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>addClass</title>
    <style>
        * {margin: 0; padding: 0;}
        #tab-menu {width: 500px; margin:50px auto; background: #ccc;}
        ul {list-style: none;}
        a {text-decoration: none; color: #fff;}
        #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.png) no-repeat; background-size: contain;}
        #tab-cont.img2 {background: url(img/img02.png) no-repeat; background-size: contain;}
        #tab-cont.img3 {background: url(img/img03.png) no-repeat; background-size: contain;}
        #tab-cont.img4 {background: url(img/img04.png) no-repeat; background-size: contain;}
        #tab-cont.img5 {background: url(img/img05.png) 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.12.4.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>

탭버튼

//탭버튼을 누를때마다 바뀜

$("#tab-btn > ul > li").click(function(){
  let target =$(this);
  let index = target.index();
  $("#tab-btn > ul > li").removeClass("active");
  target.addClass("active");
  $("#tab-cont > div").CSS("display", "none");
  $("#tab-cont > div").ed(index).css("display", "block")
})

LogoaddClass