티스토리 뷰

Web(국비)/자바스크립트

JavaScript -메뉴 보이기/감추기

Xion 2019. 10. 22. 09:13

<1>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test033.html</title>

<style type="text/css">
   #menuTable {display: none;}
</style>

<script type="text/javascript" src="js/myMenu.js">

</script>

</head>
<body>

<div>
   <h1>자바스크립트 활용</h1>
   <hr>
</div>

<div>
   <h2>메뉴보이기 / 감추기</h2>
   
   <div>
      <form>
         <!-- 클릭 시 메뉴 테이블 보이기 -->
         <input type="button" value="메뉴보이기" onclick="myMenu(1)">

         <!-- 클릭 시 메뉴 테이블 감추기 -->         
         <input type="button" value="메뉴감추기" onclick="myMenu(2)">
         
         <!-- 버틍 위에 마우스 커서를 올려놓으면 메뉴 테이블이 보이고 -->
         <!-- 다시 버튼 위에 머물던 마우스 커서가 빠져나가면 메뉴 테이블 숨기기 -->
         <input type="button" value="메뉴보이기/감추기" onmouseover="myMenu(1)" onmouseleave="myMenu(2)">
      </form>
   </div>
   <br><br>
   
   <div id = "menuTable">
      <table>
         <tr>
            <td>Java 기초</td>
         </tr>
         <tr>
            <td>Oracle 중급</td>
         </tr>
         <tr>
            <td>JSP 고급</td>
         </tr>
         <tr>
            <td>Servlet 응용</td>
         </tr>
      </table>
   </div>
</div>
</body>
</html>

<1-1_1> js 폴더에 myMenu파일 따로 만들기 

/**
 * myMenu.js
 */

function myMenu(status)
{
	var menu = document.getElementById("menuTable");
	
	if(status==1)
	{
		//메뉴 보이기
		//alert("메뉴 보이기");
		menu.style.display = "block";
	}
	else
	{
		
		//메뉴 감추기
		//alert("메뉴 감추기");
		menu.style.display ="none";
	}
}
저작자표시

'Web(국비) > 자바스크립트' 카테고리의 다른 글

JavaScript - 사용자 정의 객체  (0) 2019.10.22
HTML ＊ CSS ＊ JavaScript 마무리 정리  (0) 2019.10.22
JavaScript-window()  (0) 2019.10.21
JavaScript-Select함수 다루기(2)  (0) 2019.10.21
javaScript-checked속성 문제  (0) 2019.10.21