- JavaScript -메뉴 보이기/감추기 목차
<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 |