태그 자료실

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

내용이 변경 되는 탭 메뉴

15년 전

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script>
var menuNum;

var MIN_LAYER_SIZE;
var MAX_LAYER_SIZE;
var contents;
var scrollLayer;
var conHeightSize;
// Load시 기본적으로 지정될 정적 변수 지정
function init(){
    contents = document.getElementById("contents");
    scrollLayer = document.getElementById("scrollLayer");
// 레이어의 크기 변경시 아래 사이즈로 적용
    MIN_LAYER_SIZE = 50;
    MAX_LAYER_SIZE = 500;
}
// 레이어의 픽셀값이 0이 될때까지 감소한후 textArray의 호출된 n의 값을 기준으로
// Layer에 innerHTML 시켜줌
function scrollChangeFunction(n){
    if(n!=null){
        menuNum = n;
    }
    var textArray = new Array(
        "텝 메뉴 1의 내용 입니다.~~~~<br>안녕하세요 ^^"
        ,"텝 메뉴 2의 내용 입니다.~~~~<br>만나서 반갑습니다."
        ,"텝 메뉴 3의 내용 입니다.~~~~<br>식사하셨나요?"
        ,"텝 메뉴 4의 내용 입니다.~~~~<br>좋은 하루 되세요~"
    );
    conHeightSize = returnPixel();

    if(conHeightSize > MIN_LAYER_SIZE){
        contents.style.height = conHeightSize-10+'px';
        setTimeout("scrollChangeFunction("+ n +")",10);
    }else{
        scrollLayer.innerHTML = textArray[menuNum];
        scrollLayerDown();
    }
}
// 레이어의 크기를 MAX_LAYER_SIZE의 크기가 될 때까지 증가
function scrollLayerDown(){

    conHeightSize = returnPixel();

    if(conHeightSize < MAX_LAYER_SIZE){
        contents.style.height = (conHeightSize+10)+'px';
        setTimeout(scrollLayerDown,10);
    }
}
// 레이어의 픽셀값을 가져와 값을 리턴
function returnPixel(){
    var conHeightSize = contents.style.height;
    var px = contents.style.height.indexOf('px');
    conHeightSize = parseInt(conHeightSize.substring(0,px));
    return conHeightSize;
}
</script>
<style>
.contents{background-color:#ffffff; border:1px solid #8DBDF8; width:700px; height:500px; position:relative; overflow:hidden;clear:both; color:#fff;}
.tab{background-color:#8DBDF8; float:left; margin-left:5px; padding:5px; border:1px solid #6297E8; border-bottom:0;}
.tab a{text-decoration:none; color:#fff; font-weight:bold;}
.tab a:hover{text-decoration:none; color:#0B43C8; font-weight:bold;}
.tab a:active{text-decoration:none; color:#0B43C8; font-weight:bold;}
</style>
</HEAD>

<BODY onLoad="javascript:init()">
<div class="tab" id="tab1"><a href="javascript:scrollChangeFunction(0)">텝 메뉴1</a></div>
<div class="tab" id="tab2"><a href="javascript:scrollChangeFunction(1)">텝 메뉴2</a></div>
<div class="tab" id="tab3"><a href="javascript:scrollChangeFunction(2)">텝 메뉴3</a></div>
<div class="tab" id="tab4"><a href="javascript:scrollChangeFunction(3)">텝 메뉴4</a></div>
<div id="contents" class="contents" style="width:700px; height:500px; position:relative; overflow:hidden;">
    <div style="background-color:#8DBDF8; height:50px;">타이틀이 들어갈 부분입니다. </div>
    <div id="scrollLayer" class="scrollLayer" style="position:relative; width:700px; color:#0B43C8">텝 메뉴 1의 내용 입니다.~~~~<br>안녕하세요 ^^</div>
</div>
</BODY>
</HTML>

추천 목록

번호	제목
48	iframe 사용시 하단에 발생하는 공백 제거방법
47	아이프레임(iframe) 비율 유지하면서 크기 조절하는 방법
46	[HTML5]에서 frameset 대체 방법과 iframe 속성
45	윈도우10 시스템파일 손상 (초간단 오류 복구방법!!)
44	iframe 높이 100% 맞추기
43	윈도우10 시스템 파일 및 Dism 검사
42	다른 도메인간 iframe 크기 자동조절
41	프레임으로 나눠진 페이지에서 새로고침시 현재 페이지 유지하기
40	iframe resize 함수
39	브라우저를 동적으로 부드럽게 리사이즈
38	윈도XP, 바탕화면에서 사라진 인터넷 익스플로어 아이콘 만들기
37	레이어, 투명하게 , 중앙에 띄우기.
36	iframe대신 div를 응용해보자
35	DIV 레이어 속성
34	팝업창 항상 위 소스, 부모창과의 유동적인 운영 소스 포함
33	윈도우 미디어 플레이어 위에 레이어 올리기
32	[script] iframe 자동리사이즈(파이어폭스, 익스 지원)
31	IFRAME-x 이용한 InnerBrowsig
30	웹페이지의 원하는 부분만 인쇄
29	엄청 간단한 iframe 크기 자종 조절 스크립트
28	iframe를 이용해 페이지 이동없이 데이타 처리하기
27	문자열 자르기 (게시판 타이틀 등에 응용-한글영숫자 특수문자 지원)
26	외부문서 없는 아이프레임
25	창사이즈 변경 금지 하기
24	iframe 배경 투명하게하기
23	"800x600"부터 "1024x768"까지 "가변 폭", 그 이상은 "고정 폭"(style/css)
22	레이어 보이기/숨기기
21	메타태그 를 이용한 페이지 로딩
20	아이프레임 대용으로 사용할수 있는 OBJECT 태그
19	유동적인 내용을 고려한 레이어 위치시키기