언어공부/JavaScript&jQuery
제이쿼리(jQuery) 기초 문법 - 탭 메뉴 만들기
yeony
2021. 8. 18. 21:51
제이쿼리(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'))한다.
