Jam's story

[JQuery] show() hide() 본문

WEB/JQuery

[JQuery] show() hide()

애플쩀 2022. 5. 23. 12:40 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
.imgbox{
width:120px;
border:1px solid gray;
padding:6px;
text-align: center;
float:left;
}
.imgbox img, .imgbox button{
width:100%;
}
</style>
</head>
<body>
<!-- #imgbox1.imgbox*3>{Box$}+img+button -->
<div id="imgbox1" class="imgbox">Box1<img src="../images/img_5terre.jpg" alt="" /><button >Remove</button></div>
<div id="imgbox2" class="imgbox">Box2<img src="../images/img_5terre.jpg" alt="" /><button>hide</button></div>
<div id="imgbox3" class="imgbox">Box3<img src="../images/img_5terre.jpg" alt="" /><button>Box3</button></div>
<script type="text/javascript">
$("#imgbox1 button").click(function (event){
	
/* 	$("#imgbox1").css("display","none"); 
	$("#imgbox1").css("display","none");는 hide 기능과 같다.  */
	$("#imgbox1").hide();
});
$("#imgbox2 button").click(function (event){
	
	$("#imgbox2").css("visibility","hidden");
});
$("#imgbox3 button").click(function (event){
/* 	$("#imgbox1").css("display","none"); */
    $("#imgbox1").show();
    $("#imgbox2").css("visibility","visible"); 

});
</script>
</body>
</html>
Insert title here
Box1
Box2
Box3
저작자표시 (새창열림)

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

[JQuery] 의사클래스 풍선도움말  (0) 2022.05.24
[JQuery] 누르면 보이고 사라지고  (0) 2022.05.23
[JQuery] 모든 a태그에 있는 특정 클래스 제거  (0) 2022.05.23
[JQuery] 버튼누르면 보이기 / 숨기기  (0) 2022.05.17
jQuery 설치  (0) 2022.05.17
'WEB/JQuery' Related Articles more
Comments