<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>멀티 페이지</title>
<!-- css 파일을 불러오는 코드 -->
<!-- 아이콘 사용을 위한 Font Awesome 6 CDN -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<!-- 구글 웹 폰트 사용을 위한 CDN -->
<!-- 내가 만든 CSS 파일-->
<link rel="stylesheet" type="text/css" href="./css/reset.css">
<link rel="stylesheet" type="text/css" href="./css/commons.css">
<link rel="stylesheet" type="text/css" href="./css/test.css">
<style>
</style>
<!-- jquery cdn -->
<!-- javascript 작성 공간 -->
<script>
$(function(){
//페이지에 버튼이 포함되어 있으므로 DOM 탐색으로 처리
//[1] 첫페이지만 빼고 다 숨김
$(".page").hide().first().show();
$(".btn-prev").first().remove();
$(".btn-next").last().remove();
//[2] 다음버튼을 누르면 버튼이 속한 페이지를 숨기고 뒷페이지 표시
$(".btn-next").click(function(){
$(this).parents(".page").hide().next(".page").show();
});
//[3] 이전버튼을 누르면 버튼이 속한 페이지를 숨기고 앞페이지 표시
$(".btn-prev").click(function(){
$(this).parents(".page").hide().prev(".page").show();
});
});
</script>
</head>
<body>
<div class="container w-500">
<div class="row">
<h1>멀티 페이지</h1>
</div>
<div class="row page-wrapper">
<div class="page">
1페이지
<button class="btn btn-prev">이전</button>
<button class="btn btn-next">다음</button>
</div>
<div class="page">
2페이지
<button class="btn btn-prev">이전</button>
<button class="btn btn-next">다음</button>
</div>
<div class="page">
3페이지
<button class="btn btn-prev">이전</button>
<button class="btn btn-next">다음</button>
</div>
<div class="page">
4페이지
<button class="btn btn-prev">이전</button>
<button class="btn btn-next">다음</button>
</div>
<div class="page">
5페이지
<button class="btn btn-prev">이전</button>
<button class="btn btn-next">다음</button>
</div>
</div>
</div>
</body>
</html>
'Javascript' 카테고리의 다른 글
| 카카오 지도 API (0) | 2023.10.27 |
|---|---|
| 회원가입(JQuery) 고급화 (0) | 2023.10.26 |
| 전체선택과 개별체크박스에 대한 이벤트 구현(JQuery) (0) | 2023.10.24 |
| 체크박스 제어(JQuery) (0) | 2023.10.23 |
| 회원가입(JQuery) input이벤트를 활용한. (0) | 2023.10.18 |