탭메뉴 javascript

HTML (Markup)

<div class="category_list">
    <ul id="tab_tb">
        <li><img src="/images/tab_01.gif" id="btn1" class="hand" onclick="page('tabcon', 1)" alt="탭메뉴1" /></li>
        <li><img src="/images/tab_02.gif" id="btn2" class="hand" onclick="page('tabcon', 2)" alt="탭메뉴2" /></li>
        <li><img src="/images/tab_03.gif" id="btn3" class="hand" onclick="page('tabcon', 3)" alt="탭메뉴3" /></li>
    </ul>
</div>

<div id="tabcon1">
    탭내용 1
</div>
<div id="tabcon2" style="display:none">
    탭내용 2
</div>
<div id="tabcon3" style="display:none">
    탭내용 3
</div>

JavaScript

function page(objid, num){
    for(i=1; i <= 4; i++){  //4==메뉴 갯수
        if(num==i){
            document.getElementById(objid+i).style.display="block";
            document.getElementById("btn"+i).src="/images/tab_0"+i+"_on.gif"; //마우스 오버 했을 때 이미지
        }else{
            document.getElementById(objid+i).style.display="none";
            document.getElementById("btn"+i).src="/images/tab_0"+i+".gif"; //마우스 아웃 했을 때 이미지
        }
    }
}