Bootstrap - Tab 외부 링크 활성화

컨텐츠 작업을 하면 탭을 쓰는 경우가 많다. 탭이 있는 페이지로 가면 대부분 첫번째 탭이 활성화 되어 보여진다.

 

간혹 다른 페이지에서 링크를 걸고 두번째, 세번째 탭을 활성화 시키고 보이도록 해야하는 경우가 생긴다.

 

이런경우 아래 소스를 참고하면 링크별로 탭을 활성화하여 노출 시킬수 있다.

 

우선 외부 페이지에서 링크를 걸어준다.

<a href="url#tab01">탭1 링크</a>
<a href="url#tab02">탭2 링크</a>
<a href="url#tab03">탭3 링크</a>
<a href="url#tab04">탭4 링크</a>

 

탭 페이지에는 기본적인 부트스트랩 탭 소스를 사용하고 아래 추가 작업을 해주면 된다.

<ul class="nav nav-tabs">
	<li class="active"><a data-toggle="tab" href="#tab01">탭01</a></li>
	<li><a data-toggle="tab" href="#tab02">탭02</a></li>
	<li><a data-toggle="tab" href="#tab03">탭03</a></li>
	<li><a data-toggle="tab" href="#tab04">탭04</a></li>
</ul>

<div class="tab-content">
	<div id="tab01" class="tab-pane fade in active">
		탭01
	</div>
	<div id="tab02" class="tab-pane fade">
		탭02
	</div>
	<div id="tab03" class="tab-pane fade">
		탭03
	</div>
	<div id="tab04" class="tab-pane fade">
		탭04
	</div>
</div>

<script>
	$(function() {
		if (location.hash == "#tab01") {
			$('.nav-tabs').find('li').eq(0).addClass('active').siblings().removeClass();
			$('.tab-content').find('#tab01').addClass('active in').siblings().removeClass('active in');
		} else if (location.hash == "#tab02") {
			$('.nav-tabs').find('li').eq(1).addClass('active').siblings().removeClass();
			$('.tab-content').find('#tab02').addClass('active in').siblings().removeClass('active in');
		} else if (location.hash == "#tab03") {
			$('.nav-tabs').find('li').eq(2).addClass('active').siblings().removeClass();
			$('.tab-content').find('#tab03').addClass('active in').siblings().removeClass('active in');
		} else if (location.hash == "#tab04") {
			$('.nav-tabs').find('li').eq(3).addClass('active').siblings().removeClass();
			$('.tab-content').find('#tab04').addClass('active in').siblings().removeClass('active in');
		}
	})

	$('html, body').animate({ scrollTop: 0 }, 'fast'); // 페이지 이동후 지정된 #의 시작점으로 이동하기에 이동후 브라우저의 최상단으로 이동하게 처리
</script>

scrollTop 애니메이션을 준 이유는 활성화된 탭이 브라우저의 상단에 위치하기에 홈페이지의 헤더가 안보이게 된다.

 

이걸 방지하고자 페이지 이동하자마자 스크롤을 올려준 것이다.