코드랩 레퍼런스

.addClass() 본문

JQUERY

.addClass()

webstoryboy 2017. 6. 4. 21:08
.addClass() 메서드는 하나 이상의 클래스를 추가합니다.

Definition

  • .addClass() 메서드는 하나 이상의 클래스를 추가합니다.

Syntax

$(selector).addClass();

Compatibility

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 안드로이드 아이콘 ios 아이콘 익스플로러6 아이콘 6 익스플로러7 아이콘 7 익스플로러8 아이콘 8 익스플로러9 아이콘 9 익스플로러10 아이콘 10 익스플로러11 아이콘 11 엣지 아이콘
.addClass()

Sample1 .addClass()을 이용한 탭 메뉴 만들기

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>jQuery</title>
	<style>
		* {padding: 0; margin: 0;}
		li{list-style: none;}
		a {text-decoration: none;}
		#tab-menu {width:350px; margin: 50px auto;}
		#tab-btn ul {overflow: hidden;}
		#tab-btn li {float: left; width: 20%; text-align: center;}
		#tab-btn li a {display: block; padding:14px 10px 10px 10px; background-color: #ec407a; color:#fff; margin-right: 1px; margin-bottom: 1px; }
		#tab-cont {width: 350px; height: 260px;}
		#tab-cont.img1 {background: url(assets/img/img01.jpg) no-repeat; background-size: 350px; }
		#tab-cont.img2 {background: url(assets/img/img02.jpg) no-repeat; background-size: 350px; }
		#tab-cont.img3 {background: url(assets/img/img03.jpg) no-repeat; background-size: 350px; }
		#tab-cont.img4 {background: url(assets/img/img04.jpg) no-repeat; background-size: 350px; }
		#tab-cont.img5 {background: url(assets/img/img05.jpg) no-repeat; background-size: 350px; }
	</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 src="assets/js/jquery-1.12.4.min.js"></script>
	<script src="assets/js/jquery-ui-1.12.1.min.js"></script>
	<script>
		//버튼을 클릭하면 모든 글씨는 munu로 변경해주세요~
		// $("#tab-btn ul li").click(function(){
		// 	$("#tab-btn ul li a").text("menu");
		// });

		// //해당 버튼을 클릭하면 tab1 --> menu1으로 변경해주세요~
		// $("#tab-btn ul li").click(function(){
		// 	var target = $(this);
		// 	var index = target.index() + 1;
		// 	//alert(index);
		// 	target.find("a").text("Menu"+index);
		// });

		// $("#tab-btn ul li:eq(0)").click(function(){
		// 	$("#tab-cont").removeClass().addClass("img1");
		// });
		// $("#tab-btn ul li:eq(1)").click(function(){
		// 	$("#tab-cont").removeClass().addClass("img2");
		// });
		// $("#tab-btn ul li:eq(2)").click(function(){
		// 	$("#tab-cont").removeClass().addClass("img3");
		// });
		// $("#tab-btn ul li:eq(3)").click(function(){
		// 	$("#tab-cont").removeClass().addClass("img4");
		// });
		// $("#tab-btn ul li:eq(4)").click(function(){
		// 	$("#tab-cont").removeClass().addClass("img5");
		// });

		$("#tab-btn ul li").click(function(){
			var target = $(this);
			var index = target.index()+1;
			$("#tab-cont").removeClass().addClass("img"+index);
		});

	</script>
</body>
</html>

Share

Ad

Comments