Jam's story
[JQuery] show() hide() 본문
<!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>
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 |
Comments