묻고답하기
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
[질문]레이어 숨김/보이기 배열처리?
2004.07.09 15:35
책에다 각각의 챕터를 포스트잇으로 이름표를 달아놨다가 펴보고 싶은곳을 피면 내용이 보이는듯한 효과!
너무 어렵게 얘기 했나요? 말재주가 없어서요...
버튼이 3개가 있고 각각의 버튼을 클릭했을때 같은 위치에 있는 레이어에 각각의 내용이 표시됨.
밑에 소스 보세요...요걸 배열로 간단히 처리하고 싶습니다.
<table width=80%>
<tr>
<td>
<input type=button value="첫번째 공지사항 보기" onclick="view(1);"><br>
<input type=button value="두번째 공지사항 보기" onclick="view(2);"><br>
<input type=button value="세번째 공지사항 보기" onclick="view(3);"><br>
</td>
<td>
<div id=layer1 style="visibility:visible;POSITION: absolute;top:100px;left:400px; Z-INDEX:
1;width:400;">첫번째 공지사항 입니다..</div>
<div id=layer2 style="visibility:hidden;POSITION: absolute;top:100px;left:400px; Z-INDEX:
2;width:400;">두번째 공지사항 입니다.</div>
<div id=layer3 style="visibility:hidden;POSITION: absolute;top:100px;left:400px; Z-INDEX:
3;width:400;">세번째 공지사항 입니다.</div>
<script>
function view(val){
if(val == 1){
layer1.style.visibility = 'visible';
layer2.style.visibility = 'hidden';
layer3.style.visibility = 'hidden';
}
else if(val == 2){
layer1.style.visibility = 'hidden';
layer2.style.visibility = 'visible';
layer3.style.visibility = 'hidden';
}
else if(val == 3){
layer1.style.visibility = 'hidden';
layer2.style.visibility = 'hidden';
layer3.style.visibility = 'visible';
}
}
</script>
</td></tr></table>
이렇게 써도 되겠지만, 소스가 길고 또한 버튼이 많아 질 경우엔 곤란하겠죠?
배열로 하려고 해봤는데 에러가 자꾸 나서요?
어떻게 바꿔야 할까요?
너무 어렵게 얘기 했나요? 말재주가 없어서요...
버튼이 3개가 있고 각각의 버튼을 클릭했을때 같은 위치에 있는 레이어에 각각의 내용이 표시됨.
밑에 소스 보세요...요걸 배열로 간단히 처리하고 싶습니다.
<table width=80%>
<tr>
<td>
<input type=button value="첫번째 공지사항 보기" onclick="view(1);"><br>
<input type=button value="두번째 공지사항 보기" onclick="view(2);"><br>
<input type=button value="세번째 공지사항 보기" onclick="view(3);"><br>
</td>
<td>
<div id=layer1 style="visibility:visible;POSITION: absolute;top:100px;left:400px; Z-INDEX:
1;width:400;">첫번째 공지사항 입니다..</div>
<div id=layer2 style="visibility:hidden;POSITION: absolute;top:100px;left:400px; Z-INDEX:
2;width:400;">두번째 공지사항 입니다.</div>
<div id=layer3 style="visibility:hidden;POSITION: absolute;top:100px;left:400px; Z-INDEX:
3;width:400;">세번째 공지사항 입니다.</div>
<script>
function view(val){
if(val == 1){
layer1.style.visibility = 'visible';
layer2.style.visibility = 'hidden';
layer3.style.visibility = 'hidden';
}
else if(val == 2){
layer1.style.visibility = 'hidden';
layer2.style.visibility = 'visible';
layer3.style.visibility = 'hidden';
}
else if(val == 3){
layer1.style.visibility = 'hidden';
layer2.style.visibility = 'hidden';
layer3.style.visibility = 'visible';
}
}
</script>
</td></tr></table>
이렇게 써도 되겠지만, 소스가 길고 또한 버튼이 많아 질 경우엔 곤란하겠죠?
배열로 하려고 해봤는데 에러가 자꾸 나서요?
어떻게 바꿔야 할까요?
댓글 3
-
태엽푸는새
2004.07.09 23:17
-
태엽푸는새
2004.07.09 23:21
항목을 늘이거나 줄일 때..
aValue, aText 배열만 추가하거나, 빼거나 하면 됩니다^^ -
황은정
2004.07.12 14:42
고민하고 있었는데 너무 감사합니다!
function view( iValue ){
for( i = 0; i < aText.length; i++ ){
eval( "layer" + ( i + 1 ) ).style.visibility = "hidden";
}
eval( "layer" + iValue ).style.visibility = "visible";
}
</script>
<table width=80%><tr>
<td><script>
var aValue = new Array(
"첫번째 공지사항 보기",
"두번째 공지사항 보기",
"세번째 공지사항 보기"
);
for( i = 0; i < aValue.length; i++ ){
document.write( "" +
"<input type=button value=\"" + aValue[i] +
"\" onClick=\"view(" + ( i + 1 ) + ");\"><br>" +
"" );
}
</script></td>
<td><script>
var aText = new Array(
"첫번째 공지사항 입니다..",
"두번째 공지사항 입니다..",
"세번째 공지사항입니다."
);
var sVisible;
for( i = 0; i < aText.length; i++ ){
sVisible = i == 0 ? "visible" : "hidden";
document.write( "" +
"<div id=layer" + ( i + 1 ) +
" style=visibility:" + sVisible +
";position:absolute;top:100px;left:400px;z-index:1;width:400;>" +
aText[i] + "</div>" +
"" );
}
</script></td>
</tr></table>