toggleClass
해당 객체에 Class값을 켜고 끄는 기능을 한다. (터치식 스위치라고 생각하면 된다.)
기본적인 사용방법.
#('버튼으로 사용할 엘리먼트').click(function(){
$('토글을 적용할 엘리먼트').toggleClass('클릭시 적용될 클래스명');
});
예제. 1) 아이디값이 color인 태그 클릭 시 클래스값 redColor을 적용 및 해제하기
<!doctype html>
<html lang="ko">
<head>
<title>toggleClass 예제</title>
<meta charset="utf-8">
<style type="text/css">
#color {
color: #369;
}
#color.redColor {
color: red;
}
</style>
</head>
<body>
<div id="color">클릭하면 글자가 빨강색으로 다시 클릭하면 글자가 파랑색으로 바뀝니다.</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$('#color').click(function(){
$(this).toggleClass('redColor');
});
</script>
</body>
</html>해석
1. 실행부분 = $('#color').click(function(){})
- 아이디가 color인 엘리먼트를 클릭하였을 때 아래의 기능을 작동시켜라.
- 위와 동일한 엘리먼트(this)에 'redColor'이라는 클래스를 토글시킨다.
2. 결과
- #color라는 앨리먼트를 클릭 시
- 파랑의 글자색상이 빨강색으로 변한다.
- #color라는 앨리먼트를 다시 클릭 시
- 빨강으로 변한 글자색상이 파랑으로 돌아간다.
- 위 과정 반복
< 예제 1 > 미리보기
클릭하면 글자가 빨강색으로 다시 클릭하면 글자가 파랑색으로 바뀝니다.
예제. 2) 다중토글 적용 : 클래스명이 sideBtn인 태그를 활용하여 sideMenu에 있는 값을 토글하기.
<!doctype html>
<html lang="ko">
<head>
<title>toggleClass 예제</title>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<style type="text/css">
aside {
position: fixed;
width: 200px;
height: 100%;
top: 0;
left: -200px;
z-index: 100;
background: #ddd;
}
#container {
position: relative;
padding: 0 30px;
}
.sideBtn {
position: fixed;
width: 25px;
height: 25px;
top: 0;
left: 0;
background: #c00;
z-index: 999;
}
aside.slide {
left: 0;
}
.sideBtn.active {
left: 200px
}
aside,
.sideBtn {
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
</style>
</head>
<body>
<aside>사이드바</aside>
<div class="sideBtn"></div>
<div id="container">콘텐츠</div>
<script type="text/javascript">
function sideMenu() {
$('aside').toggleClass('slide');
$('.sideBtn').toggleClass('active');
};
$('.sideBtn').click(function() {
sideMenu();
});
</script>
</body>
</html>해석
1. 함수부분 = function sideMenu(){}
- aside 엘리먼트는 slide라는 클래스를 토글한다.
- sideBtn이라는 클래스를 가진 엘리먼트는 active라는 클래스를 토글한다.
2. 실행부분 = $('.sideBtn').click(function(){})
- sideBtn이라는 클래스를 가진 엘리먼트를 클릭하였을 때, sideMenu의 함수를 실행하여라.
3. 결과
- sideBtn 클릭 시
- aside에 slide라는 클레스값 추가
- widgetBtn에 active 클레스값 추가
- 위의 클레스값이 있을경우
- aside에 slide라는 클레스값 제거
- widgetBtn에 active 클레스값 제거
< 예제 2 > 미리보기 (빨강색의 사각형을 클릭)
사이드바
콘텐츠
'Web + 디자인 > Publishing + 코딩' 카테고리의 다른 글
| Highlight Code JavaScript TEST (0) | 2016.04.29 |
|---|---|
| Javascript를 이용한 주소(URL)변경. (0) | 2016.04.27 |
| Tistory '#2' 스킨 수정 및 기능추가 (0) | 2016.04.27 |
| jQuery length와 slideToggle 예제 (0) | 2016.03.25 |
| [CSS] before와 after 선택자를 이용하여 Float 속성 해제 (0) | 2015.04.24 |
