탭메뉴

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {
        $("ul.tab li").click(function() {
        var num = $("ul.tab li").index($(this));
        $("ul.tab li.on").removeClass("on");
        $(this).addClass("on");
        $("div.tabCont > div").hide();
        $($("div.tabCont div")[num]).show();
    });
    $("ul.tab li:first").trigger('click');
});
</script>

<ul class="tab">
     <li>tab01</li>
     <li>tab02</li>
     <li>tab03</li>
</ul>
<div class="tabCont">
     <div>cont 01</div>
     <div>cont 02</div>
     <div>cont 03</div>
</div>

tab_jquery.html

tab_jquery_img.html

tab_jquery_img1.html