JAVAIARY

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

lectureNote/HTML

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

shiherlis 2023. 1. 4. 15:35

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

나의수강목록 페이지
강좌 상세 페이지

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

'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