아래의 내용은
처음 로드하면 화면에 목록만 보여지고 목록을 클릭하면 그 목록에 해당하는 내용이 보여지는 스크립트이다.
div 태그를 사용하여 숨길 내용을 감싸고
div태그의 속성 중 "display"속성을 수정하여 숨김 처리 또는 보임처리한다.
내용을 숨기기 위해서는 table태그로 묶여져 있는 내용만 가능하다.
<html>
<head>
<script>
function init_div ()
{
var list1 = document.getElementById("list1");
var list2 = document.getElementById("list2");
var list3 = document.getElementById("list3");
var list4 = document.getElementById("list4");
list1.style.display = "none";
list2.style.display = "none";
list3.style.display = "none";
list4.style.display = "none";
}
function ch_disp (id)
{
var ch_obj = document.getElementById (id);
if (ch_obj.style.display == "none")
ch_obj.style.display = "";
else
ch_obj.style.display = "none";
}
</script>
</head>
<body onLoad = "init_div ()">
<table width = 800>
<tr>
<td>
<a href = "#" onClick = "ch_disp ('list1');">1. 목록 1입니다...</a>
</td>
</tr>
<tr>
<td>
<div id = "list1">
<table width = 100%>
<tr>
<td>
목록1에 대한 내용<br>
목록1에 대한 내용<br>
목록1에 대한 내용<br>
목록1에 대한 내용<br>
목록1에 대한 내용<br>
목록1에 대한 내용<br>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<a href = "javascript:ch_disp ('list2');">2. 목록 2입니다...</a>
</td>
</tr>
<tr>
<td>
<div id = "list2">
<table width = 100%>
<tr>
<td>
목록2에 대한 내용<br>
목록2에 대한 내용<br>
목록2에 대한 내용<br>
목록2에 대한 내용<br>
목록2에 대한 내용<br>
목록2에 대한 내용<br>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<a href = "#" onClick = "ch_disp ('list3');">3. 목록 3입니다...</a>
</td>
</tr>
<tr>
<td>
<div id = "list3">
<table width = 100%>
<tr>
<td>
목록3에 대한 내용<br>
목록3에 대한 내용<br>
목록3에 대한 내용<br>
목록3에 대한 내용<br>
목록3에 대한 내용<br>
목록3에 대한 내용<br>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<a href = "javascript:ch_disp ('list4');">4. 목록 4입니다...</a>
</td>
</tr>
<tr>
<td>
<div id = "list4">
<table width = 100%>
<tr>
<td>
목록4에 대한 내용<br>
목록4에 대한 내용<br>
목록4에 대한 내용<br>
목록4에 대한 내용<br>
목록4에 대한 내용<br>
목록4에 대한 내용<br>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
처음 로드하면 화면에 목록만 보여지고 목록을 클릭하면 그 목록에 해당하는 내용이 보여지는 스크립트이다.
div 태그를 사용하여 숨길 내용을 감싸고
div태그의 속성 중 "display"속성을 수정하여 숨김 처리 또는 보임처리한다.
내용을 숨기기 위해서는 table태그로 묶여져 있는 내용만 가능하다.
<html>
<head>
<script>
function init_div ()
{
var list1 = document.getElementById("list1");
var list2 = document.getElementById("list2");
var list3 = document.getElementById("list3");
var list4 = document.getElementById("list4");
list1.style.display = "none";
list2.style.display = "none";
list3.style.display = "none";
list4.style.display = "none";
}
function ch_disp (id)
{
var ch_obj = document.getElementById (id);
if (ch_obj.style.display == "none")
ch_obj.style.display = "";
else
ch_obj.style.display = "none";
}
</script>
</head>
<body onLoad = "init_div ()">
<table width = 800>
<tr>
<td>
<a href = "#" onClick = "ch_disp ('list1');">1. 목록 1입니다...</a>
</td>
</tr>
<tr>
<td>
<div id = "list1">
<table width = 100%>
<tr>
<td>
목록1에 대한 내용<br>
목록1에 대한 내용<br>
목록1에 대한 내용<br>
목록1에 대한 내용<br>
목록1에 대한 내용<br>
목록1에 대한 내용<br>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<a href = "javascript:ch_disp ('list2');">2. 목록 2입니다...</a>
</td>
</tr>
<tr>
<td>
<div id = "list2">
<table width = 100%>
<tr>
<td>
목록2에 대한 내용<br>
목록2에 대한 내용<br>
목록2에 대한 내용<br>
목록2에 대한 내용<br>
목록2에 대한 내용<br>
목록2에 대한 내용<br>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<a href = "#" onClick = "ch_disp ('list3');">3. 목록 3입니다...</a>
</td>
</tr>
<tr>
<td>
<div id = "list3">
<table width = 100%>
<tr>
<td>
목록3에 대한 내용<br>
목록3에 대한 내용<br>
목록3에 대한 내용<br>
목록3에 대한 내용<br>
목록3에 대한 내용<br>
목록3에 대한 내용<br>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<a href = "javascript:ch_disp ('list4');">4. 목록 4입니다...</a>
</td>
</tr>
<tr>
<td>
<div id = "list4">
<table width = 100%>
<tr>
<td>
목록4에 대한 내용<br>
목록4에 대한 내용<br>
목록4에 대한 내용<br>
목록4에 대한 내용<br>
목록4에 대한 내용<br>
목록4에 대한 내용<br>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
Trackback URL : http://www.ishappy.net/tc/trackback/10
-
Mike
Tracked from Mike 2007/07/20 07:47
OMG! I cant beleive it.
당신의 의견을 작성해 주세요.