탭메뉴(php) 소스

깔끔한 탭메뉴입니다.

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">내용 - 첫번째탭 </div>

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

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

    </div>

</div>

SCRIPT

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

실행결과

http://jsfiddle.net/3n74v/1298/