스크립트
<head>
<script language=Javascript>
function open_menu1(){ // menu1 사용 하고자 펑션 이름.
var openDiv=document.getElementById('point1').style; //point1 부분에 Div ID
openDiv.display=(openDiv.display=='none')? '' : 'none'; // '' = 비움 : 'none' = none으로 설정 display 의 값을 변경
}
</script>
</head>
사용예
<head>
<script language=Javascript>
function open_menu1(){
var openDiv=document.getElementById('point1').style;
openDiv.display=(openDiv.display=='none')? '' : 'none';
var openDiv=document.getElementById('point2').style;
openDiv.display=(openDiv.display=='none')? 'none' : 'none';
var openDiv=document.getElementById('point3').style;
openDiv.display=(openDiv.display=='none')? 'none' : 'none';
var openDiv=document.getElementById('point4').style;
openDiv.display=(openDiv.display=='none')? 'none' : 'none';
}
</script>
</head>
openDiv.display=(openDiv.display=='none')? 'none' : 'none'; // none:none = 두가지 값 모두 none으로 보이기 위해
HTML & CSS
<a align=absmiddle style='cursor:pointer' onclick=open_menu1()>클릭</a>//onclick open_menu1() 스크립트의 펑션 명
또는
<a align=absmiddle style='cursor:pointer' onmouseover=open_menu1()>마우스 오버</a> // 마우스 오버 형태로 사용시 open_menu1() 은 스크립트 펑션 명
<DIV id=point1 style="display:none; width:99%; padding:5; border:1px solid #bbbbbb; line-height:140%; margin-bottom:10px; text-align:left; background-color:#ffffdd;">
point1 = DIV ID = 스크립트에 지정된 DIV ID
style="display:none" 최초 지정된 display 속성 :none 화면에 보이지 않게 지정
사용예
<BODY>
<a align=absmiddle style='cursor:pointer' onclick=open_menu1()>클릭</a><br />
또는 <br />
<div style="height:40px;">
<DIV id=point1 style="display:none; width:99%; padding:5; border:1px solid #bbbbbb; line-height:140%; margin-bottom:10px; text-align:left; background-color:#ffffdd;">
11111111111
</div>
<DIV id=red style="border 1px solid #bbbbb; background-color:red; width:100%; height:40px;">
</div>
</BODY>
Javascript : Css : DIV 숨기기 보이기