Posted in " 컴퓨터 " , 2009/11/12 12:01
개요
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의 내용입니다.
여기서 메뉴의 수에 맞게 요소를 늘릴 때 주의해야 할 것은
span의 onclick="ShowTab('숫자')"와 div 의 id="tab_숫자" 형식입니다.
반드시 이 형식을 지켜야 작동하며, 만일 자바 스크립트를 고치셨다면 그에 맞게 수정해주어야 합니다.
같은 Tag가 사용된 글 목록이에요.
- 2009/07/04 | [Java] 더블클릭으로 페이...
- 2009/07/01 | [HTML] 표 그리기
- 2009/12/03 | 브라우저 접속 정보 표시하기
- 2009/11/24 | prototype.js 기반의 Conte... (4)
- 2009/09/21 | 더블 클릭 스크롤 스크립트 (2)
- 2009/10/23 | Highslide - 자바스크립트...
같은 분류의 다른 글 목록이에요.
- 2009/11/24 | prototype.js 기반의 Co... (4)
- 2009/11/15 | 강력한 자막 제작 프로...
- 2009/11/13 | 심플한 아이콘이 이렇게... (2)
- 2009/11/12 | » div를 이용하여 탭 메뉴...
- 2009/11/12 | 현재 사용중인 플러그인들
- 2009/11/06 | Vista의 ReadyBoost를 X... (3)
- 2009/10/25 | 텍스트큐브 플러그인의...
- 2009/10/24 | Highslide를 위한 img...
Trackback
Trackback Address :: http://shar.kr/trackback/379





Comments