[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();
});
});
});
|
댓글을 작성하시려면 로그인이 필요합니다.
프로그램
태그 필터 (최대 3개)
전체
개발자
소스
기타
mysql
팁자료실
javascript
php
linux
flash
정규표현식
jquery
node.js
mobile
웹서버
os
프로그램
강좌
썸네일
이미지관련
도로명주소
그누보드5
기획자
견적서
계약서
기획서
마케팅
제안서
seo
통계
서식
통계자료
퍼블리셔
html
css
반응형
웹접근성
퍼블리싱
표준화
반응형웹
홈페이지기초
부트스트랩
angularjs
포럼
스크린리더
센스리더
개발자톡
개발자팁
퍼블리셔톡
퍼블리셔팁
기획자톡
기획자팁
프로그램강좌
퍼블리싱강좌
댓글 8개
브라우저의 뒤로 가기 등에 맞게 이전에 선택한 메뉴를 보여주는 것도 가능합니다.
코드 전반부를 function으로 빼서 돌려주면 되겠죠?
$(function() {
}
를 씌우는 이유는 무엇인가요 !
이 코드는 아래와 동일한 의미입니다.
$(document).ready(function() { 블라블라 });
브라우저로 HTML 문서를 정확히 모두 읽어와 준비 완료됐을 때 블라블라가 수행되죠.
만약 이미지 등 페이지를 제대로 보여줄 수 있는 추가적인 요소까지 모두 읽어온 후에 블라블라가 수행되게 하려면 다음과 같이 하시면 됩니다.
$(window).load(function() { 블라블라 });
저는 jquery 연구하고 있는 중이지만, 실력이 완전히 쌓일 때까지는 jqueryUI도 한번씩 사용한답니다... :)
예를 들어, index.html#content-3 등으로 바로 접근해 보세요.
약간 응용하면 처음부터 모든 컨텐츠를 노출하지 않고, 접근할 때마다 Ajax로 가져올 수도 있죠.
예를 들어, 탭은 아니지만 이전에 이와 유사한 방식으로 구현한 사이트입니다. https://blayer.co.kr/
개인적으론 jQuery UI에 있는 걸 그대로 쓰는 것보다는 그 코드를 읽고 자기만의 코드를 작성하는 편이 크게 도움이 된다고 생각합니다.