Show Hide Javascript
함수를 넣어서 간단하게 쇼하이드를 시킬수 있다.
보이지 않게 할 경우.
function hideLayer(whichLayer) {
if (document.getElementById) { // DOM의 사용이 가능한 경우
document.getElementById(whichLayer).style.visibility = "hidden";
document.getElementById(whichLayer).style.display = "none";
}
else if (document.all) { // IE의 예전버전의 경우
document.all[whichlayer].style.visibility = "hidden";
document.all[whichlayer].style.display = "none";
}
else if (document.layers) {
document.layers[whichLayer].visibility = "hidden";
document.layers[whichLayer].display = "none";
}
}
보이게 할경우
function showLayer(whichLayer) {
if (document.getElementById) {
document.getElementById(whichLayer).style.visibility = "visible";
document.getElementById(whichLayer).style.display = "";
}
else if (document.all) {
document.all[whichlayer].style.visibility = "visible";
document.all[whichlayer].style.display = "";
}
else if (document.layers) {
document.layers[whichLayer].visibility = "visible";
document.layers[whichLayer].display = "";
}
}
<body>
<ul>
<li><a href=”#” onmouseover=”showLayer()” onmouseout=””>MENU1</a></li>
<li><a href=”#” onmouseover=”showLayer()” onmouseout=””>MENU2</a></li>
<li><a href=”#” onmouseover=”showLayer()” onmouseout=””>MENU3</a></li>
</ul>
<div id=”m1” class=”divHide”> // 초기설정을 보이지 않게한다.
첫번째 메뉴입니다.
</div>
<div id=”m2” class=”divHide”>
두번째 메뉴입니다.
</div>
<div id=”m3” class=”divHide”>
세번째 메뉴입니다.
</div>
<style>
.divHide {
display:none;
visibility:hidden;
}
</style>
onmouseover, onmouseout 대시 onclick 등을 사용할수 있다.
'Web > Javascript' 카테고리의 다른 글
| Javascript 난수발생하기 (0) | 2008.08.30 |
|---|---|
| Show Hide 자바스크립트 CheckBox (0) | 2008.07.04 |
| Javascript 와 DOM을 사용한 시계 (0) | 2008.04.08 |
| 자바스크립트를 이용한 간단한 SHOW HIDE (0) | 2008.03.20 |
| 입력폼에 숫자만 입력할수 있게 하기 (0) | 2008.03.04 |