티스토리 뷰

WEB/기타

Javascript로 컨텐츠 열고 닫기

silverline79 2025. 1. 10. 19:48

클릭전

클릭후

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>Untitled Document</title>

<script>

// 메인 숨김메뉴
function MainMenu(mod)
{	
	if(mod == 'block') {
		
		document.getElementById("contentM01").style.display="none"; 
		document.getElementById("contentM02").style.display="block"; 
		document.getElementById("contentM_btn1").style.display="block"; 
		document.getElementById("contentM_btn").style.display="none"; 
	} else { 
		document.getElementById("contentM01").style.display="block";
		document.getElementById("contentM02").style.display="none";
		document.getElementById("contentM_btn1").style.display="none"; 
		document.getElementById("contentM_btn").style.display="block"; 
	}
}

</script>
<style>
#contentM01 { clear: both; width: 400px; height: 200px; padding: 0 15px 0 15px; background-color:#06F;}
#contentM02 { display: none; clear: both; width: 400px; height: 200px; padding: 0 15px 0 15px; background-color:#C6F}

</style>
</head>
<body>
<p id="contentM_btn"><a href="#none;" onclick="MainMenu('block'); return false;">컨텐츠열기</a></p>
<p id="contentM_btn1" style="display:none;"><a href="#none;" onclick="MainMenu('none'); return false;">컨텐츠닫기</a></p>
<div id="contentM01"> 클릭전 </div>
<div id="contentM02"> 컨텐츠 보기내용들 </div>

</body>
</html>

컨텐츠열기닫기.html
0.00MB

'WEB > 기타' 카테고리의 다른 글

[챗GPT가 알려주는] Eclipse에서 Git 사용 방법  (0) 2025.02.03
챗GPT가 알려주는 JDK와 JRE의 차이  (0) 2025.01.16
intelliJ에서 out폴더 안보일때  (0) 2025.01.08
JAVASCRIPT Object  (0) 2025.01.07
Nexacro 매뉴얼  (0) 2025.01.01
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/03   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31
글 보관함