간단한 css가 적용된 li태그 다섯개가 있을 때
각 li태그에 클래스를 적용, 제거해본다.
클래스 추가 - addClass( )
menu 클래스를 가진 li태그를 클릭했을 때
클릭된 li 태그에 addClass를 통해 select클래스를 추가해준다.
알기 쉽도록 select클래스가 있는 li태그에 css를 적용시켜뒀다.
1,2번째 li 태그를 클릭하여 select클래스를 추가한다.
select클래스의 css가 적용된 것을 확인한다.
한번에 여러개의 클래스도 추가가 가능하다.
1,3,5번째 li태그에 두 개의 클래스가 적용된 것을 확인할 수 있다.
클래스 제거 - removeClass( )
클릭한 li태그가 select클래스를 가지고 있지 않다면 추가를 하고
select클래스를 가지고 있다면 select클래스를 제거해준다.
모든 li태그의 select클래스가 제거되었다.
클래스 추가&제거 - toggleClass( )
jQuery는 클래스를 on/off식으로 부여하는 함수를 제공한다.
메뉴3은 원래 select를 가지고 있었으므로 두 클래스 중 하나만 적용된 채로 나타난다.
'Front-end > JavaScript' 카테고리의 다른 글
[자바스크립트] 이벤트의 흐름, 캡처, 타겟, 버블 단계 알아보기, eventPhase, stopPropagation (0) | 2022.05.29 |
---|---|
[자바스크립트] 태그 속성 가져오기, 속성 변경하기, attr, data (0) | 2022.05.28 |
[자바스크립트] js, jQuery로 스타일,css 속성값 변경 (0) | 2022.05.27 |
[자바스크립트] css스타일 속성 표기법, 단위 생략 (0) | 2022.05.27 |
[자바스크립트] js 스타일 접근, jQuery css 접근, 다중 접근, getComputedStyle, style, css (0) | 2022.05.27 |