이전
목록
다음
아

[jQuery] 탭 메뉴

아샬
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 2011-11-03 (목) 14:07:23 · 5517 · 8
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();
        });
    });
});


#개발자팁 #개발자 #팁자료실 #jquery
|

댓글 8개

아아샬
프로필 보기이 회원 글보기이 회원의 댓글보기
 2011-11-03 (목) 14:09:20
interval로 location.hash를 주기적으로 검사하면

브라우저의 뒤로 가기 등에 맞게 이전에 선택한 메뉴를 보여주는 것도 가능합니다.

코드 전반부를 function으로 빼서 돌려주면 되겠죠?
pport
프로필 보기이 회원 글보기이 회원의 댓글보기
 2011-11-03 (목) 14:33:03
내용을 복사해서 테스트해보면 이상하게 나오네요.
아아샬
프로필 보기이 회원 글보기이 회원의 댓글보기
 2011-11-03 (목) 15:45:48
이미지를 사용하기 때문에 원문의 이미지 파일을 다운로드 받아서 넣어주셔야 합니다.
견견해
프로필 보기이 회원 글보기이 회원의 댓글보기
 2011-11-03 (목) 21:41:39
선생님!
$(function() {
}
를 씌우는 이유는 무엇인가요 !
아아샬
프로필 보기이 회원 글보기이 회원의 댓글보기
 2011-11-04 (금) 01:54:48
$(function() { 블라블라 });

이 코드는 아래와 동일한 의미입니다.

$(document).ready(function() { 블라블라 });

브라우저로 HTML 문서를 정확히 모두 읽어와 준비 완료됐을 때 블라블라가 수행되죠.

만약 이미지 등 페이지를 제대로 보여줄 수 있는 추가적인 요소까지 모두 읽어온 후에 블라블라가 수행되게 하려면 다음과 같이 하시면 됩니다.

$(window).load(function() { 블라블라 });
견견해
프로필 보기이 회원 글보기이 회원의 댓글보기
 2011-11-04 (금) 14:03:07
역시 뭔가 다르시네요 ㅎ 많은 도움되엇습니다 감사합니다.
xpem
프로필 보기이 회원 글보기이 회원의 댓글보기
 2011-11-06 (일) 10:53:48
추후에는 http://jqueryui.com/demos/tabs/#ajax 이런 것도 참고해보시면 어떨까 싶기도합니다.
저는 jquery 연구하고 있는 중이지만, 실력이 완전히 쌓일 때까지는 jqueryUI도 한번씩 사용한답니다... :)
아아샬
프로필 보기이 회원 글보기이 회원의 댓글보기
 2011-11-06 (일) 12:02:51
jQuery UI에 있는 tabs랑 약간 목적이 다른데, 이 코드는 anchor를 주소창에 적용하기 때문입니다.

예를 들어, index.html#content-3 등으로 바로 접근해 보세요.

약간 응용하면 처음부터 모든 컨텐츠를 노출하지 않고, 접근할 때마다 Ajax로 가져올 수도 있죠.

예를 들어, 탭은 아니지만 이전에 이와 유사한 방식으로 구현한 사이트입니다. https://blayer.co.kr/

개인적으론 jQuery UI에 있는 걸 그대로 쓰는 것보다는 그 코드를 읽고 자기만의 코드를 작성하는 편이 크게 도움이 된다고 생각합니다.
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
12-03-19 조회 3,375
12-03-16 조회 4,019
12-03-14 조회 3,885
12-03-13 조회 3,512
12-03-13 조회 4,347
12-03-12 조회 5,427
12-03-12 조회 1만
12-03-08 조회 5,965
12-03-06 조회 1.1만
12-03-06 조회 3,689
12-03-06 조회 6,227
12-03-02 조회 4,996
12-02-29 조회 3,559
12-02-27 조회 3,969
12-02-22 조회 3,625
12-02-20 조회 3,560
12-02-20 조회 6,699
12-02-01 조회 3,219
12-01-30 조회 8,741
12-01-29 조회 3,233
12-01-24 조회 3,400
12-01-21 조회 3,193
12-01-10 조회 3,664
11-12-26 조회 3,554
11-12-23 조회 4,978
11-12-23 조회 4,581
11-12-23 조회 4,155
11-12-23 조회 7,952
11-12-22 조회 3,685
11-12-17 조회 3,620
11-12-12 조회 3,024
11-12-08 조회 7,567
11-12-08 조회 3,438
11-12-07 조회 3,763
11-12-06 조회 5,438
11-12-02 조회 3,396
11-12-01 조회 3,103
11-11-30 조회 6,899
11-11-26 조회 3,823
11-11-24 조회 4,625
11-11-22 조회 2,986
11-11-22 조회 6,617
11-11-18 조회 4,964
11-11-16 조회 3,417
11-11-14 조회 3,436
11-11-12 조회 3,931
11-11-08 조회 3,254
11-11-06 조회 1만
11-11-06 조회 3,829
11-11-03 조회 5,518
11-11-02 조회 5,783
11-11-01 조회 9,306
11-10-19 조회 2,792
11-10-17 조회 2,593
11-10-10 조회 2,540
11-10-07 조회 3,330
11-10-06 조회 3,923
11-10-06 조회 2,474
11-10-02 조회 3,224
11-09-08 조회 4,230
11-09-08 조회 2,571
11-09-07 조회 2,602
11-09-02 조회 2,686
11-09-01 조회 3,614
11-08-28 조회 3,510
11-08-23 조회 3,357
11-08-22 조회 2,774
11-08-22 조회 2,370
11-08-13 조회 2,415
11-08-05 조회 2,869
11-08-03 조회 4,080
11-07-03 조회 2,499
11-06-15 조회 3,196
11-06-15 조회 3,038
11-05-15 조회 2,833
11-05-11 조회 5,570
11-04-12 조회 2,965
11-01-27 조회 3,809
11-01-26 조회 2,603
11-01-26 조회 4,453
11-01-18 조회 2,653
10-11-23 조회 2,759
10-10-24 조회 4,720
10-09-15 조회 4,406
10-09-07 조회 3,374
10-08-27 조회 4,063
10-08-20 조회 6,957
10-07-30 조회 5,633
10-06-30 조회 2,856
10-06-11 조회 4,616
10-06-11 조회 3,313
10-05-15 조회 4,143
10-05-10 조회 2,834
10-03-19 조회 5,400
10-03-05 조회 5,164
10-02-17 조회 5,566
09-11-21 조회 6,912
09-11-09 조회 3,986
09-11-04 조회 6,699
09-10-26 조회 3,843
글쓰기