JAVA를 잡아라!...
비동기 처리_Toggle 본문
[ JavaScript Toggle ]
- 웹 개발에서 요소를 동적으로 표시하거나 숨기는 기능
- JavaScript의 toggle 메서드를 활용해 요소의 표시 상태를 전환
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Toggle</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
</head>
<body>
<button id="toggle">이미지 토글</button>
<img class="image" src="images/test01.jpg" style="display:none" alt="토글 이미지"/>
<script type="text/javascript">
$(document).ready(function(){
$('#toggle').click(function(){
$('.image').toggle();
});
});
</script>
</body>
</html>
'Front' 카테고리의 다른 글
| 비동기 처리_ID 중복검사, 닉네임 중복검사 (0) | 2024.01.20 |
|---|---|
| View_EL & Custom Tag & JSTL (0) | 2024.01.17 |
| 비동기 처리_ID 중복검사 (0) | 2024.01.15 |
| 비동기 처리_개념 (0) | 2024.01.15 |
| JavaScript_회원가입 폼 만들기 (1) | 2024.01.04 |
'Front' Related Articles
more
