탭메뉴

출처 : http://blog.naver.com/fly0ff?Redirect=Log&logNo=140112046695

탭메뉴 소스는 여러가지가 있다.

구글링을 해보았으나 내가 원하는 소스가 없기에 몇개 참고해서 만들었음.

디자인 실력이 그지같아서  조금만 더 꾸미면 괜츈할듯..ㅋ

 

실제 구현 페이지는 ajax로 만든 asp에서 파일 include를 시켜서 탭메뉴를 불러왔다.

속도도 괜찮았고 탭메뉴+ajax가 깔끔해서 너무 단순해 보이기 까지...-_-;

디자이너 언니들이 예쁘게 입혀주면~ 그럴듯 할 것 같다.ㅋ

 

물론 ie, FF, 크롬, 사파리 다 돌아간다~

 

소스는 아래와 같다.

 

<script language="javascript" type="text/javascript">
function TD_ch(num) {
    var TD_block = "Tab"+num;
    var TDname1 = "TD"+num;

    for(i=1;i<4;i++){
        var TD_num = "Tab"+i;    
 var TDname2 = "TD"+i;   
        document.getElementById(TD_num).style.display="none";   
 document.getElementById(TDname2).style.backgroundColor="#ffffff"; 
 document.getElementById(TDname2).style.fontSize="12";
 document.getElementById(TDname2).style.fontWeight="normal";
    }
    document.getElementById(TD_block).style.display="block";
    document.getElementById(TDname1).style.backgroundColor="#B3CADF";
    document.getElementById(TDname1).style.fontWeight="bold";  
}

 

</script>

 

<table width="100%">
    <tr>
        <td>

            <table border="0" cellpadding="0" cellspacing="0" width="100%">
                <tr>
                    <td align="center" onclick="javascript:TD_ch(1);" style="cursor:pointer;FONT-WEIGHT: bold;" bgcolor="#B3CADF" id="TD1" height="25" width="33%"> Tab1 </td>
                    <td align="center" onclick="javascript:TD_ch(2);" style="cursor:pointer" bgcolor="#ffffff" id="TD2" height="25" width="33%"> Tab2 </td>
                    <td align="center" onclick="javascript:TD_ch(3);" style="cursor:pointer" bgcolor="#ffffff" id="TD3" height="25" width="33%"> Tab3 </td>
                </tr>
            </table>

 

            <div id="Tab1" style="display:block;">
                <table border="1" bordercolor="#B3CADF" cellpadding="0" cellspacing="0" width="100%">

                    <tr>
                        <td bgcolor="#ffffff" colspan=3 >
                            첫번째 탭.
                        </td>
                    </tr>
                </table>
            </div>

            <div id="Tab2" style="display:none;">
                <table border="1" bordercolor="#B3CADF" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                        <td bgcolor="#ffffff" colspan=3> 
                            이미지 삽입도 가능해요!<br />
                            <img src="images/App 아이콘/news.jpg" />

                        </td>
                    </tr>
                </table>
            </div>

            <div id="Tab3" style="display:none;">
                <table border="1" bordercolor="#B3CADF" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                        <td bgcolor=#ffffff colspan=3> 
                            파일링크도 가능해요! ^^
                        </td>
                    </tr>
                </table>
            </div>
        </td>
    </tr>
</table>

 

 

실행결과