반응형
팀프로젝트 웹사이트를 마이페이지 부분을 수정 중이다. 웹페이지 이동 없이 마이페이지 내용을 보고 싶다. 그래서 토글기능을 떠올렸다. 일단 만들어 봤는데 문제가 있다. 댕근머니를 누르고 내 정보를 누르면 중복이 된다. 중복이 없어야 한다. 댕근머니를 누른 상태에서 내 정보를 누르면 댕근머니 내용이 사라져야 한다. 테스트해보고 프로젝트 내용에 적용시켜 보자.
1. html코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/main.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="../javascript/main.js"></script>
<title>Document</title>
</head>
<body>
<!-- 토글 버튼 -->
<button class="toggle-button" data-target="#my-wallet">댕근머니</button>
<button class="toggle-button" data-target="#my-info">내정보</button>
<button class="toggle-button" data-target="#dog-info">강아지 정보</button>
<button class="toggle-button" data-target="#chat">채팅</button>
<button class="toggle-button" data-target="#sales-list">판매 목록</button>
<button class="toggle-button" data-target="#wish-list">찜 목록</button>
<!-- 토글할 섹션 -->
<section id="my-wallet" class="toggle-section">
<!-- 댕근머니 내용 -->
<p>머니를 충전하시겠습니까?</p>
</section>
<section id="my-info" class="toggle-section">
<!-- 내정보 내용 -->내 정보입니다.
</section>
<section id="dog-info" class="toggle-section">
<!-- 강아지 정보 내용 -->강아지 정보입니다.
</section>
<section id="chat" class="toggle-section">
<!-- 채팅 내용 -->채팅하기 기능입니다.
</section>
<section id="sales-list" class="toggle-section">
<!-- 판매 목록 내용 --> 판매 목록입니다.
</section>
<section id="wish-list" class="toggle-section">
<!-- 찜 목록 내용 --> 찜목록입니다.
</section>
</body>
</html>
2. 자바스크립트코드
$(document).ready(function() {
$('.toggle-button').click(function() {
var target = $(this).data('target');
$(target).toggleClass('active');
$(this).toggleClass('active');
});
});
3. css코드
.toggle-section {
display: none;
}
.toggle-section.active {
display: block;
}
.toggle-button {
background-color: #a02424;
border: none;
padding: 10px;
margin: 5px;
cursor: pointer;
}
.toggle-button.active {
background-color: #ed0808;
}
4. 결과물 : 댕근머니 토글 활성화된 상태에서 내 정보를 누르면 댕근머니 정보가 사라져야 함.
수정해서 팀프로젝트에 적용시켜보자.
1. HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/main.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="../javascript/main.js"></script>
<title>Document</title>
</head>
<body>
<!-- 토글 버튼 -->
<button id="toggle-button-1" class="toggle-button" data-target="#my-wallet">댕근머니</button>
<button id="toggle-button-2" class="toggle-button" data-target="#my-info">내정보</button>
<button id="toggle-button-3" class="toggle-button" data-target="#dog-info">강아지 정보</button>
<button id="toggle-button-4" class="toggle-button" data-target="#chat">채팅</button>
<button id="toggle-button-5" class="toggle-button" data-target="#sales-list">판매 목록</button>
<button id="toggle-button-6" class="toggle-button" data-target="#wish-list">찜 목록</button>
<section id="my-wallet" class="toggle-section">
<p>댕근머니 내용</p>
</section>
<section id="my-info" class="toggle-section">
<p>내 정보 내용</p>
</section>
<section id="dog-info" class="toggle-section">
<p>강아지 정보 내용</p>
</section>
<section id="chat" class="toggle-section">
<p>채팅 내용</p>
</section>
<section id="sales-list" class="toggle-section">
<p>판매 목록 내용</p>
</section>
<section id="wish-list" class="toggle-section">
<p>찜 목록 내용</p>
</section>
</body>
</html>
2. CSS
.toggle-button {
display: block;
margin-bottom: 10px;
font-size: 16px;
font-weight: bold;
background-color: #eee;
border: none;
border-radius: 5px;
padding: 10px;
cursor: pointer;
}
.toggle-section {
display: none;
background-color: #f2f2f2;
padding: 10px;
border-radius: 5px;
margin-bottom: 10px;
}
.toggle-section.active {
display: block;
}
3. Javascript
$(document).ready(function() {
$('.toggle-button').click(function() {
var target = $(this).data('target');
$(target).toggleClass('active');
$(this).toggleClass('active');
$('.toggle-button').not(this).removeClass('active');
$('.toggle-section').not(target).removeClass('active');
});
});
4. 결과물 : 해결됨. 누를 때마다 내용이 바뀜. 중첩되지 않음.
5. 팀프로젝트 파일에 적용 - 잘 된다. 기분 좋다.
반응형
'코딩 학원(국비지원) > 코딩 팀프로젝트' 카테고리의 다른 글
| 79일차 코딩학원 (게시판 만들기 발표) (1) | 2023.05.12 |
|---|---|
| 팀프로젝트 게시판을 만들어보자. (0) | 2023.05.04 |
| 팀 프로젝트 - Javascript 무한스크롤, 이미지 미리보기, 출력하기 (1) | 2023.04.13 |
| 코딩 팀 프로젝트 회의 (0) | 2023.03.21 |
| 새로운 조에서 코딩 팀프로젝트 (0) | 2023.03.20 |
