본문 바로가기

언어공부/JavaScript&jQuery

제이쿼리(jQuery) 기초 문법 - 탭 메뉴 만들기

제이쿼리(jQuery) 기초 문법 

탭 메뉴 만들기

탭 메뉴를 클릭하면 버튼이 활성화 되어 해당 탭 메뉴 내용이 나타나게 한다. 여기서 addClass() 메소드와 removeClass()메소드를 사용한다.

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>탭 메뉴 만들기</title>
	<style>		
		.tab {
			list-style: none;
			margin: 0px;
			padding: 0px;
			overflow: hidden;
		}

		.tab li {
			float: left;
		}
		
		.tab li a {
			display: inline;
			color: black;
			text-align: center;
			text-decoration: none;
			padding: 10px;
		}
		
		.tabcont {
			display: none;
			background-color:yellow;
			padding: 6px 12px;
			color:black;
		}
		ul.tab li.on{
			background-color: yellow;
		}
		.tabcont.on {
			display: block;
		}
	</style>
		
	<script src="../js/jquery.js"></script>
	<script>
		$(function() {
			$('ul.tab li').click(function() {
				var activeTab = $(this).attr('data-tab');
				$('ul.tab li').removeClass('on');
				$('.tabcont').removeClass('on');
				$(this).addClass('on');
				$('#' + activeTab).addClass('on');
			})
		});
	</script>
</head>
<body>
	<div id="container">
		<ul class="tab">
			<li class="on" data-tab="menu1"><a href="#">menu1</a></li>
			<li data-tab="menu2"><a href="#">menu2</a></li>
			<li data-tab="menu3"><a href="#">menu3</a></li>
			<li data-tab="menu4"><a href="#">menu4</a></li>
		</ul>

		<div id="menu1" class="tabcont on">
			<h3>menu1</h3>
			<p> This is menu1 content</p>
		</div>

		<div id="menu2" class="tabcont">
			<h3>menu2</h3>
			<p> This is menu2 content</p>
		</div>

		<div id="menu3" class="tabcont">
			<h3>menu3</h3>
			<p> This is menu3 content</p>
		</div>

		<div id="menu4" class="tabcont">
			<h3>menu4</h3>
			<p> This is menu4 content</p>
		</div>
	</div>

</body>
</html>

 

스크립트 부분을 보면, ul.tab li부분이 클릭되면, ul.tab li와 .tabcontent 중 'on'클래스를 삭제(removeClass('on'))해 현재 활성화 된 부분을 끄고,  클릭된 ul.tab li와 해당 id의 클래스에 'on'클래스를 추가(addClass('on'))한다.

 

첫 실행 화면

 

menu3 탭을 클릭하면 내용이 변경된다.