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

[jQuery] 탭 메뉴

단축키

Articles