javascript - [jQuery] 탭 메뉴

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();
        });
    });
});

List of Articles
번호	제목	날짜	조회 수
47	주민등록번호로 성별/나이/연령대 구분	2014.03.01	8954
46	체크박스 체크하면 레이어 보여주기. 체크안하면 알려주기	2014.03.01	7540
45	샘플) top left menu	2014.03.01	5605
44	지정한 크기로 링크페이지 새창열기	2014.03.01	5530
43	새창을 띠워서 focus주기	2014.03.01	5817
42	배너 램덤으로 부여주기	2014.03.01	5981
41	라디오버튼 선택 체크여부 radio checked	2014.03.01	12755
40	자바스크립트, javascript, 간단한 파일 확장자 검사후 retur	2014.03.01	5494
39	활용예제 : 체크박스 전체선택 전체해제 /라디오버튼	2014.03.01	7071
38	iframe 자동 리사이즈	2014.03.01	6084
37	javascript 인쇄 미리보기, 출력, 페이지 설정 등	2014.03.01	33023
36	div 높이 가운데정렬	2014.03.01	5691
35	자바스크립트 소수점 자리수 계산	2014.03.01	6968
34	fckeditor 2.6.6 엄청 편해졌네	2014.03.01	5483
33	클릭위치로 레이어 띄우기	2014.03.01	6289
32	[jQuery] textarea 글자수 카운트	2014.03.01	7527
31	top 부분이 고정되는 슬라이딩 메뉴입니다	2014.03.01	5837
30	(소스)jqury 롤오버 버튼 쉽게 만들기	2014.03.01	5880
29	jQuery 이미지 슬라이드 오버시 큰이미지 보여주기 소스	2014.03.01	7055
»	[jQuery] 탭 메뉴	2014.03.01	6474