수라의 티스토리

[SCRIPT]
<script type="text/javascript">
//탭메뉴
var num;
$(document).ready(function() {
    $("div.tabCont > div").hide().filter("div:first-child").show();
    //$("ul.tabMenu01 li:first-child").addClass("on");
    $("ul.tabMenu01 li").click(function() {
        num = $("ul.tabMenu01 li").index($(this));
        $("ul.tabMenu01 li.on").removeClass("on");
        $(this).addClass("on");
        $("div.tabCont > div.cont").hide();
        $($("div.tabCont div.cont")[num]).show();
    });
    $("ul.paging li.prev").click(function() {
        num--;
        if (num < 0) {num = 0; };
        $("ul.tabMenu01 li.on").removeClass("on");
        $($("ul.tabMenu01 li")[num]).addClass("on");
        $("div.tabCont > div.cont").hide();
        $($("div.tabCont div.cont")[num]).show();
    });
    $("ul.paging li.next").click(function() {
        num++;
        var max=($("ul.tabMenu01 li").size())-1;
        if(num > max) {num = max; };
        $("ul.tabMenu01 li.on").removeClass("on");
        $($("ul.tabMenu01 li")[num]).addClass("on");
        $("div.tabCont > div.cont").hide();
        $($("div.tabCont div.cont")[num]).show();
    });
    $("ul.tabMenu01 li:first").trigger("click");
});
</script>

[HTML]
<ul class="tabMenu01 tabCeo clfix">
    <li class="tab01">Greeting</li>
    <li class="tab02">Profile</li>
    <li class="tab01">Greeting</li>
    <li class="tab02">Profile</li>
</ul>
<ul class="paging">
    <li class="prev">prev</li>
    <li class="next">next</li>
</ul>
<div class="tabCont">
    <div class="cont">
        1
    </div>
    <div class="cont">
        2
    </div>
    <div class="cont">
        3
    </div>
    <div class="cont">
        4
    </div>
</div>