[HTML] 레이어 보이기, 감추기

by **Admin** 2008-09-09, 6:07 am

각각의 레이어에 DB 자료를 읽어들여 선택한 레이어만 보이고, 나머지는 감추는 HTML/자바스크립트 구문.
예를들어 4개의 레이어중에서 1번째 레이어를 선택하면 나머지 3개의 레이어는 감추는 방법입니다.
document.getElementById(’레이어_ID’).style.display = ‘none’ -> 레이어_ID’를 감추기
document.getElementById(’레이어_ID’).style.display = ‘block’ -> 레이어_ID’를 보이기
** 폼 테그 정의
<form name=form1 action=<?=$PHP_SELF?> method=post>
<input type=”radio” name=”type” value=”1″ checked OnClick=”document.getElementById(’Layer1′).style.display = ‘block’;document.getElementById(’Layer2′).style.display = ‘none’;document.getElementById(’Layer3′).style.display = ‘none’;document.getElementById(’Layer4′).style.display = ‘none’”>레이어1
<input type=”radio” name=”type” value=”2″ OnClick=”document.getElementById(’Layer1′).style.display = ‘none’;document.getElementById(’Layer2′).style.display = ‘block’;document.getElementById(’Layer3′).style.display = ‘none’;document.getElementById(’Layer4′).style.display = ‘none’”>레이어2
<input type=”radio” name=”type” value=”3″ OnClick=”document.getElementById(’Layer1′).style.display = ‘none’;document.getElementById(’Layer2′).style.display = ‘none’;document.getElementById(’Layer3′).style.display = ‘block’;document.getElementById(’Layer4′).style.display = ‘none’”>레이어3
<input type=”radio” name=”type” value=”4″ OnClick=”document.getElementById(’Layer1′).style.display = ‘none’;document.getElementById(’Layer2′).style.display = ‘none’;document.getElementById(’Layer3′).style.display = ‘none’;document.getElementById(’Layer4′).style.display = ‘block’”>레이어4
</form>
** 레이어 정의 항목
<div id=Layer1 style=display:block;position:absolute;>
<table>
<tr><td>번호</td><td align=center>테이블1</td></tr>
<?
$query = “select * from table1″;
$result = mysql_query($query,$link);
while($info = mysql_fetch_row($result)){
echo “<tr><td>”.$info[0].”</td><td>”.$info[1].”</td></tr>”;
}
?>
</table>
</div>
<div id=Layer2 style=display:block;position:absolute;>
<table>
<tr><td>번호</td><td align=center>테이블2</td></tr>
<?
$query = “select * from table2″;
$result = mysql_query($query,$link);
while($info = mysql_fetch_row($result)){
echo “<tr><td>”.$info[0].”</td><td>”.$info[1].”</td></tr>”;
}
?>
</table>
</div>
<div id=Layer3 style=display:block;position:absolute;>
<table>
<tr><td>번호</td><td align=center>테이블3</td></tr>
<?
$query = “select * from table3″;
$result = mysql_query($query,$link);
while($info = mysql_fetch_row($result)){
echo “<tr><td>”.$info[0].”</td><td>”.$info[1].”</td></tr>”;
}
?>
</table>
</div>
<div id=Layer4 style=display:block;position:absolute;>
<table>
<tr><td>번호</td><td align=center>테이블4</td></tr>
<?
$query = “select * from table4″;
$result = mysql_query($query,$link);
while($info = mysql_fetch_row($result)){
echo “<tr><td>”.$info[0].”</td><td>”.$info[1].”</td></tr>”;
}
?>
</table>
</div>