html 소스

<div id="container">

    <ul class="tabs">

        <li class="active" rel="tab1">메뉴1</li>

        <li rel="tab2">메뉴2</li>

        <li rel="tab3">메뉴3</li>

    </ul>

    <div class="tab_container">

        <div id="tab1" class="tab_content">

            <ul>

                <li><a href="#">첫번째 리스트1</a></li>

                <li><a href="#">첫번째 리스트2</a></li>

            </ul>

        </div>

        <!-- #tab1 -->

        <div id="tab2" class="tab_content">두번째 내용</div>

        <!-- #tab2 -->

        <div id="tab3" class="tab_content">세번째 내용</div>

        <!-- #tab3 -->

    </div>

    <!-- .tab_container -->

</div>

<!-- #container -->

srcipt 소스

$(function () {

    $(".tab_content").hide();

    $(".tab_content:first").show();

    $("ul.tabs li").click(function () {

        $("ul.tabs li").removeClass("active").css("color", "#333");

        //$(this).addClass("active").css({"color": "darkred","font-weight": "bolder"});

        $(this).addClass("active").css("color", "darkred");

        $(".tab_content").hide()

        var activeTab = $(this).attr("rel");

        $("#" + activeTab).fadeIn()

    });

});

css 소스

ul.tabs {

    margin: 0;

    padding: 0;

    float: left;

    list-style: none;

    height: 32px;

    border-bottom: 1px solid #eee;

    border-left: 1px solid #eee;

    width: 100%;

    font-family:"dotum";

    font-size:12px;

}

ul.tabs li {

    float: left;

    text-align:center;

    cursor: pointer;

    width:82px;

    height: 31px;

    line-height: 31px;

    border: 1px solid #eee;

    border-left: none;

    font-weight: bold;

    background: #fafafa;

    overflow: hidden;

    position: relative;

}

ul.tabs li.active {

    background: #FFFFFF;

    border-bottom: 1px solid #FFFFFF;

}

.tab_container {

    border: 1px solid #eee;

    border-top: none;

    clear: both;

    float: left;

    width: 248px;

    background: #FFFFFF;

}

.tab_content {

    padding: 5px;

    font-size: 12px;

    display: none;

}

.tab_container .tab_content ul {

    width:100%;

    margin:0px;

    padding:0px;

}

.tab_container .tab_content ul li {

    padding:5px;

    list-style:none

}

;

 #container {

    width: 249px;

    margin: 0 auto;

}