일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
Tags
- springSecurity
- security
- programmers
- javascript
- 반복문
- 스프링 부트
- Linux
- 시큐리티로그인
- 시큐리티
- 로그인
- sql
- StyleSheet
- Spring boot
- JAVA11
- 싱글톤
- 리눅스
- 목록
- css
- 소스트리
- codingtest
- java
- gradle
- 시큐리티 로그인
- input태그
- html
- 코딩테스트
- 프로그래머스
- 2차원배열
- springboot
- 시큐리티 로그아웃
Archives
- Today
- Total
JAVAIARY
탭 활성화시키기 , 탭의 요소 본문
해당 문서는 부트스트랩 5.2 의 탭 기능을 다루고 있음
0. 탭의 동작 이해
- 예제 ( 부트스트랩 v5.2)
<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
<div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
<div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
<div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
</div>
- tab 의 [data-bs-target]= "#tabpanel의 아이디값"
- 하나가 활성화되면 나머지 컨텐츠는 숨겨짐
$().tab('show');
- tab의 <button>의 id 선택
- javascript에서 tab('show')를 통해 강제로 열 수 있음.
1. 요구사항
- 나의 수강 목록에 후기 탭 추가
- 수강 완료 상태의 강의에만 '후기 작성' 버튼 노출 및 활성화
- 링크를 달아 클릭시 강좌페이지의 수강 후기 탭으로 이동
- 강좌 상세 페이지에서 수강 후기 탭 열기
- 강좌검색 페이지에서 진입했을 때에는 강의계획서 탭이 기본으로 노출 (현재 적용 중)
- 내부링크를 통해 수강후기 탭이 위치한 곳으로 이동
- '후기 작성' 버튼을 통해 접속했을 때만 수강 후기탭이 기본으로 열리도록 설정
2. 코드
- <c:if> 태그를 이용해 '수강완료' 상태일 경우에만 '후기 작성' 버튼이 노출되도록 설정
- a 태그를 이용해 해당 강의의 상세페이지 링크 연결
- #tabReview 해시를 통해 문서 내부의 'tabReview' id를 가진 위치로 이동(수강 후기 탭)
- 내부링크 이동을 위해 탭의 <li>태그의 id 지정
- 자바스크립트에서 탭 선택을 위한 탭 <button>태그의 id 지정
- 컨텐츠와 탭(버튼) 연결을 위해 data-bs-target 속성 지정
- 컨텐츠의 id 지정(탭버튼과의 연결에 이용됨)
<script>
x=location.hash
$(document).ready(function() {
if (x == '#tabReview') {
$('#review-tab').tab('show');
}
});
</script>
- 해시값을 받아서 해시값이 #tabReview 일 때만 수강후기 탭이 기본으로 열리도록 설정
- ★ 탭의 id 값은 웹문서가 로드 된 후에 받아올 수 있음에 주의
- $(document).ready(function() {
}) 안에 넣어 줄 것
- $(document).ready(function() {
3. 결과
- 수강버튼 클릭시 수강후기탭으로 바로 이동
'lectureNote > HTML' 카테고리의 다른 글
날짜 유효성 체크 (0) | 2023.01.07 |
---|---|
INPUT태그의 다양한 속성들 (1) | 2022.09.23 |
Form 태그 이용하기 (0) | 2022.09.22 |
HTML 표(테이블)와 멀티미디어 삽입하기 (0) | 2022.09.22 |
HTML 기본 (0) | 2022.09.21 |