div를 이용하여 탭 메뉴 구현하기

개요

div를 이용하여 탭 메뉴를 구현하는 방법을 예제 중심으로 간략하게 설명하도록 하겠습니다.

여기서 소개할 탭 메뉴의 구현 원리는 아주 단순한데요.
div 의 스타일 항목 중 display 항목과 자바 스크립트를 이용하여, 특정 메뉴를 클릭하면 그 메뉴에 해당하는 div를 제외한 다른 모든 div의 display항목을 none으로 바꿔주는 식으로 작동합니다.

예제

tab_0 보기 tab_1 보기 tab_2 보기

tab_0의 내용입니다.

tab_1의 내용입니다.

tab_2의 내용입니다.

자바 스크립트의 구성

우선 적절한 위치에 다음 스크립트를 넣어줍니다.

<script type="text/javascript">
<!--
function ShowTabex(val){
  for (i=0; i<3; i++) {
    var tb = document.getElementById('tab_' + i);
    if (i != val) tb.style.display = "none";
    else tb.style.display = "block";
  }
}
//-->
</script>

위 스크립트에서 반드시 구성할 탭 메뉴의 수만큼 다음 부분을 수정해 주시기 바랍니다.

for (i=0; i<3; i++) {

이 부분의 i<3 를 자신이 사용할 탭 메뉴의 수에 맞게 수정해 주셔야 합니다.

예) 사용할 탭 메뉴가 4개인 경우 : i<4

이 스크립트는 메뉴를 구성하는 div[주: 위 소스에서는 각각 tab_0, tab_1, tab_2, tab_3 까지의 id를 가진 div가 됩니다.]의 style을 제어하는 것으로, onclick등을 통하여 전달받은 val[주: 위 소스에서는 0~3 사이의 수 중 하나가 됩니다.]에 해당하는 div를 제외하고 모두 숨기는 기능을 합니다.

탭 메뉴의 구성

메뉴는 span등 onclick을 지원하는 객체를 통해 변수 val을 위의 스크립트로 전달하여 div의 style을 제어합니다.

위 스크립트에 맞추어 메뉴를 구성하면 다음과 같습니다.

<div style="text-align: right;">
  <div style="border: 1px solid rgb(204, 204, 204);">
  <span onclick="ShowTabex('0')" style="padding: 0pt 5px; cursor: pointer;">tab_0 보기</span>
  <span onclick="ShowTabex('1')" style="padding: 0pt 5px; cursor: pointer;">tab_1 보기</span>
  <span onclick="ShowTabex('2')" style="padding: 0pt 5px; cursor: pointer;">tab_2 보기</span>
  </div>
</div>
<div style="text-align: center;">
  <div id="tab_0" style="width: 100%; display: block;">
    tab_0의 내용입니다.
  </div>
  <div id="tab_1" style="width: 100%; display: none;">
    tab_1의 내용입니다.
  </div>
  <div id="tab_2" style="width: 100%; display: none;">
    tab_2의 내용입니다.
  </div>
</div>

여기서 메뉴의 수에 맞게 요소를 늘릴 때 주의해야 할 것은
span의 onclick="ShowTab('숫자')"와 div 의 id="tab_숫자" 형식입니다.

반드시 이 형식을 지켜야 작동하며, 만일 자바 스크립트를 고치셨다면 그에 맞게 수정해주어야 합니다.