[jQuery] 탭 메뉴
http://sir.co.kr/bbs/board.php?bo_table=pg_qa&wr_id=4094
이 글을 보고 질문과 다른 내용을 간단히 만들어 봤습니다.
탭 메뉴를 클릭하면 해당 컨텐츠를 보여주며,
하나의 HTML이지만 각 메뉴마다 다른 URL(앵커 활용)을 제공합니다.
index.html
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>Tab Menu</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="stylesheet.css" media="screen" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="application.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<ul id="tabs-menu">
<li id="tab-1"><a href="#content-1">A</a></li>
<li id="tab-2"><a href="#content-2">B</a></li>
<li id="tab-3"><a href="#content-3">C</a></li>
<li id="tab-4"><a href="#content-4">D</a></li>
</ul>
<div id="content-1" class="tabs-content">
A에 들어갈 내용
</div>
<div id="content-2" class="tabs-content">
B에 들어갈 내용
</div>
<div id="content-3" class="tabs-content">
C에 들어갈 내용
</div>
<div id="content-4" class="tabs-content">
D에 들어갈 내용
</div>
</div>
</body>
</html>
stylesheet.css
body {
font-size: 12px;
background: #FFF;
color: #333;
margin: 0;
}
#container {
margin: 10px auto;
width: 600px;
padding: 10px;
background: #F88;
}
#tabs-menu {
margin: 0;
padding: 0;
list-style-type: none;
width: 441px;
height: 30px;
background: url(./images/pink/bar_pink.gif) 0 0 no-repeat;
}
#tabs-menu li {
float: left;
margin-left: 2px;
}
#tabs-menu li#tab-1 {
margin-left: 144px;
}
#tabs-menu li a {
display: block;
overflow: hidden;
width: 71px;
height: 0;
padding-top: 30px;
background-position: 0 100%;
background-repeat: no-repeat;
}
#tabs-menu li#tab-1 a {
background-image: url(./images/pink/pink_off_01.gif);
}
#tabs-menu li#tab-1 a:hover,
#tabs-menu li#tab-1 a.selected {
background-image: url(./images/pink/pink_on_01.gif);
}
#tabs-menu li#tab-2 a {
background-image: url(./images/pink/pink_off_02.gif);
}
#tabs-menu li#tab-2 a:hover,
#tabs-menu li#tab-2 a.selected {
background-image: url(./images/pink/pink_on_02.gif);
}
#tabs-menu li#tab-3 a {
background-image: url(./images/pink/pink_off_03.gif);
}
#tabs-menu li#tab-3 a:hover,
#tabs-menu li#tab-3 a.selected {
background-image: url(./images/pink/pink_on_03.gif);
}
#tabs-menu li#tab-4 a {
background-image: url(./images/pink/pink_off_04.gif);
}
#tabs-menu li#tab-4 a:hover,
#tabs-menu li#tab-4 a.selected {
background-image: url(./images/pink/pink_on_04.gif);
}
.tabs-content {
padding: 20px 0;
}
application.js
$(function() {
var menu_items = $('#tabs-menu li');
$('.tabs-content').hide();
if (location.hash) {
$('a[href=' + location.hash + ']').addClass('selected');
$(location.hash).show();
} else {
menu_items.find('a').first().addClass('selected');
$('.tabs-content:first').show();
}
menu_items.each(function(index, item) {
$(item).find('a').click(function() {
var target = $(this).attr('href');
menu_items.find('a').removeClass('selected');
$(this).addClass('selected');
$('.tabs-content').hide();
$(target).show();
});
});
});
이 글을 보고 질문과 다른 내용을 간단히 만들어 봤습니다.
탭 메뉴를 클릭하면 해당 컨텐츠를 보여주며,
하나의 HTML이지만 각 메뉴마다 다른 URL(앵커 활용)을 제공합니다.
index.html
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>Tab Menu</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="stylesheet.css" media="screen" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="application.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<ul id="tabs-menu">
<li id="tab-1"><a href="#content-1">A</a></li>
<li id="tab-2"><a href="#content-2">B</a></li>
<li id="tab-3"><a href="#content-3">C</a></li>
<li id="tab-4"><a href="#content-4">D</a></li>
</ul>
<div id="content-1" class="tabs-content">
A에 들어갈 내용
</div>
<div id="content-2" class="tabs-content">
B에 들어갈 내용
</div>
<div id="content-3" class="tabs-content">
C에 들어갈 내용
</div>
<div id="content-4" class="tabs-content">
D에 들어갈 내용
</div>
</div>
</body>
</html>
stylesheet.css
body {
font-size: 12px;
background: #FFF;
color: #333;
margin: 0;
}
#container {
margin: 10px auto;
width: 600px;
padding: 10px;
background: #F88;
}
#tabs-menu {
margin: 0;
padding: 0;
list-style-type: none;
width: 441px;
height: 30px;
background: url(./images/pink/bar_pink.gif) 0 0 no-repeat;
}
#tabs-menu li {
float: left;
margin-left: 2px;
}
#tabs-menu li#tab-1 {
margin-left: 144px;
}
#tabs-menu li a {
display: block;
overflow: hidden;
width: 71px;
height: 0;
padding-top: 30px;
background-position: 0 100%;
background-repeat: no-repeat;
}
#tabs-menu li#tab-1 a {
background-image: url(./images/pink/pink_off_01.gif);
}
#tabs-menu li#tab-1 a:hover,
#tabs-menu li#tab-1 a.selected {
background-image: url(./images/pink/pink_on_01.gif);
}
#tabs-menu li#tab-2 a {
background-image: url(./images/pink/pink_off_02.gif);
}
#tabs-menu li#tab-2 a:hover,
#tabs-menu li#tab-2 a.selected {
background-image: url(./images/pink/pink_on_02.gif);
}
#tabs-menu li#tab-3 a {
background-image: url(./images/pink/pink_off_03.gif);
}
#tabs-menu li#tab-3 a:hover,
#tabs-menu li#tab-3 a.selected {
background-image: url(./images/pink/pink_on_03.gif);
}
#tabs-menu li#tab-4 a {
background-image: url(./images/pink/pink_off_04.gif);
}
#tabs-menu li#tab-4 a:hover,
#tabs-menu li#tab-4 a.selected {
background-image: url(./images/pink/pink_on_04.gif);
}
.tabs-content {
padding: 20px 0;
}
application.js
$(function() {
var menu_items = $('#tabs-menu li');
$('.tabs-content').hide();
if (location.hash) {
$('a[href=' + location.hash + ']').addClass('selected');
$(location.hash).show();
} else {
menu_items.find('a').first().addClass('selected');
$('.tabs-content:first').show();
}
menu_items.each(function(index, item) {
$(item).find('a').click(function() {
var target = $(this).attr('href');
menu_items.find('a').removeClass('selected');
$(this).addClass('selected');
$('.tabs-content').hide();
$(target).show();
});
});
});
|
댓글을 작성하시려면 로그인이 필요합니다.
댓글 8개
브라우저의 뒤로 가기 등에 맞게 이전에 선택한 메뉴를 보여주는 것도 가능합니다.
코드 전반부를 function으로 빼서 돌려주면 되겠죠?
$(function() {
}
를 씌우는 이유는 무엇인가요 !
이 코드는 아래와 동일한 의미입니다.
$(document).ready(function() { 블라블라 });
브라우저로 HTML 문서를 정확히 모두 읽어와 준비 완료됐을 때 블라블라가 수행되죠.
만약 이미지 등 페이지를 제대로 보여줄 수 있는 추가적인 요소까지 모두 읽어온 후에 블라블라가 수행되게 하려면 다음과 같이 하시면 됩니다.
$(window).load(function() { 블라블라 });
저는 jquery 연구하고 있는 중이지만, 실력이 완전히 쌓일 때까지는 jqueryUI도 한번씩 사용한답니다... :)
예를 들어, index.html#content-3 등으로 바로 접근해 보세요.
약간 응용하면 처음부터 모든 컨텐츠를 노출하지 않고, 접근할 때마다 Ajax로 가져올 수도 있죠.
예를 들어, 탭은 아니지만 이전에 이와 유사한 방식으로 구현한 사이트입니다. https://blayer.co.kr/
개인적으론 jQuery UI에 있는 걸 그대로 쓰는 것보다는 그 코드를 읽고 자기만의 코드를 작성하는 편이 크게 도움이 된다고 생각합니다.