잡동사니에도 사랑을

[21.10.15] exam02(05_jQueryAnimation) 본문

JAVA_EE/JQuery

[21.10.15] exam02(05_jQueryAnimation)

luvforjunk 2021. 10. 15. 10:51
728x90
반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.btn {
	background: cyan;
}
</style>
</head>
<body>
<h1>show/hide</h1>
<div id="sh">
   <input type="button" class="btn" value="보이기" />
   <input type="button" value="숨기기" />
   <input type="button" value="토글" />
   <div>
      <img src="../img/img5.PNG" width="500px" height="300px" />
   </div>
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function(){
	//---------------------------------------------------
	$('#sh > input').click(function(){
		$(this).addClass('btn');
		$('#sh > input').not($(this)).removeClass('btn');
	});
	//---------------------------------------------------
	
	$('#sh > input:eq(0)').click(function(){ // div에 있는 input태그 중 0번째를 클릭해
		$("#sh > div").show(200); // 보여라
	});
	
	$('#sh > input:eq(1)').click(function(){
		$("#sh > div").hide(200);
	});
	
	$('#sh > input:eq(2)').click(function(){
		$("#sh > div").toggle(200);
	});
	
});
</script>
</body>
</html>

 

728x90
반응형

'JAVA_EE > JQuery' 카테고리의 다른 글

[21.10.15] exam04(05_jQueryAnimation)  (0) 2021.10.15
[21.10.15] exam03(05_jQueryAnimation)  (0) 2021.10.15
[21.10.15] exam01(05_jQueryAnimation)  (0) 2021.10.15
[21.10.14] exam03(04_jQueryCSS) - 파일로드, 속성 추가, 속성 제거  (0) 2021.10.14
[21.10.14] exam02(04_jQueryCSS) - ??????  (0) 2021.10.14
'JAVA_EE/JQuery' Related Articles more