테스트 사이트 - 개발 중인 베타 버전입니다
SIR

[jQuery] 탭 메뉴

아샬
프로필 보기이 회원 글보기
 · 14년 전 · 3593 · 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();
        });
    });
});


목록
이전글 다음글

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 8개

아샬
프로필 보기이 회원 글보기
 14년 전
interval로 location.hash를 주기적으로 검사하면

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

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

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

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

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

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

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

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

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

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

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

게시글 목록

번호 제목
12245
PHP php 함수검색기 입니다.
12244
PHP php로 동영상파일 영상정보 가져오기 입니다.
12243
PHP fwrite() 함수 관련 입니다.
12241
PHP php 로 ssh2 원격접속 명령실행하기 입니다. 1
12239
PHP 모바일로 접속하는지 웹으로 접속하는지 체크하기 입니다. 1
12238
PHP 모바일 OS에서 자바스크립트 select() 구현하기 입니다.
12237
Mobile 모바일웹에서 현재위치의 좌표 가져오기
12233
JavaScript alert 창 디자인하기 3
12232
JavaScript 자동완성 자바스크립트
12230
PHP 주소로 구글 좌표 구하기 1
355
고급스러운 그라데이션 4
12227
PHP php에서 ssh2로 서버간 파일 복사하기 입니다. 2
12226
PHP euc-kr페이지에서 AJAX연동시 한글 깨짐 현상 해결법 입니다.
12225
PHP js와 php를 배열로 연결하기 입니다.
353
국내 폰트저작권 총정리. 1
12221
PHP vi 정리 입니다. 3
12220
PHP 디비에서 특정문자를 변경 하는 방법 입니다.
12219
PHP 다른 url 의 읽어서 값만 변수에 저장
12218
PHP 검색사이트 긁어오기 입니다.
12217
PHP bresenham 알고리즘을 이용한 직선, 원, 타원 그리기 입니다.
12216
PHP 숫자 입력 유효성 체크 하기 입니다.
12215
PHP get 변수에서 원하는 값만 바꾸기 입니다.
12214
PHP php 기본 실행 시간이 초과 됐을때 에러 해결법 입니다.
12213
PHP $PHP_SELF 가 안될때 해결법 입니다.
12212
PHP phpMyAdmin 하나로 서버내 전체사용자가 사용하기 입니다.
이전 다음
전체 목록