이번엔 class를 따로 지정하지 않고 ID만으로 toggle 시키는 예제이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>사진 열기</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$("button:eq(0)").click(function() {
$("#box1").toggle("fast");
});
});
</script>
<button> 버튼 </button>
<br>
<img id="box1" style="display: none;" src="img/icon_50.gif" alt="이미지">
</body>
</html>이미지인 box은 기본적으로 display: none; 상태로 설정되어있는데
toggle()을 통해 display 되도록 한다.
이곳에서 button:eq()는 버튼이 여러개 있을 때 몇 번 째 버튼인지 알려주기 위함이고,
toggle("fast")는 투글이 활성화 되어서 display가 되는 속도를 조절하는 것이다.
slow로 하게 된다면 천천히 디스플레이된다.
수행결과
'개발자노트 > 웹' 카테고리의 다른 글
| 클라이언트와 서버간의 동작 과정(웹 서비스 진행 과정) (0) | 2022.08.01 |
|---|---|
| HTML - API 사용하기 ( 구글맵API , Marker icon 변경 ) (0) | 2022.07.29 |
| HTML - jQuery를 이용한 toggleClass("on") 예제 (0) | 2022.07.28 |
| HTML - 마우스 이벤트 (0) | 2022.07.27 |
| HTML - 광고배너 / 갤러리 등에 사용되는 예제 (0) | 2022.07.27 |
