CSS와 DOM과 Javascript를 이용한 간단한 ShowHide.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>
.divHide {
display:none;
visibility:hidden;
}
.divShow {
visibility:show;
}
table {
width:600px;
border:1px solid #000000;
}
caption {
font-weight:bold;
}
tr {
height:30px;
}
td {
text-align:center;
font-weight:bold;
}
#m1, #dm1 {
background:#eeeeee;
}
#m2, #dm2 {
background:#cccccc;
}
#m3, #dm3 {
background:#aaaaaa;
}
</style>
<script>
function showHide(num) {
var dm1 = document.getElementById("dm1"); // dom을 이용해서 값을 가져옴.
var dm2 = document.getElementById("dm2");
var dm3 = document.getElementById("dm3");
dm1.className = "divHide"; // 이벤트 발생시 전체를 초기화해서 보이지 않게함
dm2.className = "divHide";
dm3.className = "divHide";
switch (num) {
case 1:
dm1.className = "divShow";
break;
case 2:
dm2.className = "divShow";
break;
case 3:
dm3.className = "divShow";
break;
}
}
</script>
</head>
<body>
<table>
<caption>SHOW HIDE TEST</caption>
<tr>
<td id="m1" onclick="showHide(1);">M1</td>
<td id="m2" onclick="showHide(2);">M2</td>
<td id="m3" onclick="showHide(3);">M3</td>
</tr>
<td id="dm1" colspan="3">M1.............</td>
<td id="dm2" colspan="3" class="divHide">M2.............</td>
<td id="dm3" colspan="3" class="divHide">M3.............</td>
</tr>
</table>
</body>
</html>
조금만 생각을 하면 다양하게 응용가능하며, 색상도 함께 바꿀수 있다.
반드시 DOM을 사용할경우에는 대소문자를 구별하므로 getElementById 라고 표기해야한다.
'Web > Javascript' 카테고리의 다른 글
| Show Hide Javascript (0) | 2008.07.02 |
|---|---|
| Javascript 와 DOM을 사용한 시계 (0) | 2008.04.08 |
| 입력폼에 숫자만 입력할수 있게 하기 (0) | 2008.03.04 |
| window.onload (0) | 2008.02.06 |
| Date객체 (0) | 2008.02.06 |