탭 활성화시키기 , 탭의 요소

해당 문서는 부트스트랩 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. 코드

mycourse.jsp

• <c:if> 태그를 이용해 '수강완료' 상태일 경우에만 '후기 작성' 버튼이 노출되도록 설정
• a 태그를 이용해 해당 강의의 상세페이지 링크 연결
• #tabReview 해시를 통해 문서 내부의 'tabReview' id를 가진 위치로 이동(수강 후기 탭) 

coursedetail.jsp

• 내부링크 이동을 위해 탭의 <li>태그의 id 지정
• 자바스크립트에서 탭 선택을 위한 탭 <button>태그의 id 지정 
• 컨텐츠와 탭(버튼) 연결을 위해 data-bs-target 속성 지정

coursedetail.jsp

• 컨텐츠의 id 지정(탭버튼과의 연결에 이용됨)

	<script>
		x=location.hash
		
		 $(document).ready(function() { 
			 
			 if (x == '#tabReview') {
			   $('#review-tab').tab('show');
			   
			 } 
		 });
	</script>

• 해시값을 받아서 해시값이 #tabReview 일 때만 수강후기 탭이 기본으로 열리도록 설정
• ★ 탭의 id 값은 웹문서가 로드 된 후에 받아올 수 있음에 주의
  • $(document).ready(function() {
    })  안에 넣어 줄 것

---

3. 결과

나의수강목록 페이지

강좌 상세 페이지

• 수강버튼 클릭시 수강후기탭으로 바로 이동