개요

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

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


예제

tab_0 보기 tab_1 보기 tab_2 보기
tab_0의 내용입니다.


자바 스크립트의 구성

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


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

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

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

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

이 스크립트는 메뉴를 구성하는 div주1의 style을 제어하는 것으로, onclick등을 통하여 전달받은 val주2에 해당하는 div를 제외하고 모두 숨기는 기능을 합니다.


탭 메뉴의 구성

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

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


tab_0 보기 tab_1 보기 tab_2 보기
tab_0의 내용입니다.


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

반드시 이 형식을 지켜야 작동하며, 만일 자바 스크립트를 고치셨다면 그에 맞게 수정해주어야 합니다.
  1. 위 소스에서는 각각 tab_0, tab_1, tab_2, tab_3 까지의 id를 가진 div가 됩니다.
  2. 위 소스에서는 0~3 사이의 수 중 하나가 됩니다.
같은 Tag가 사용된 글 목록이에요.
같은 분류의 다른 글 목록이에요.

Trackback

Trackback Address :: http://shar.kr/trackback/379

Comments

What's on your mind?

댓글 입력 폼