[jquery] tab메뉴 링크연결, hash

탭메뉴가 들어간 A 페이지를 만들었다. 부트스트랩을 이용해서..

그런데 다른페이지B에서 어떤 버튼을 클릭했을때, 탭메뉴페이지A의 해당 탭을 선택한것 처럼 바로 열리도록 하고싶을때

hash 스크립트로 간단하게 해결할 수 있다. a태그의 북마크 같은 기능을 탭메뉴 스크립트로 만든것.

A 페이지 탭
<!-- nav -->
<ul class="nav nav-tabs">
    <li class="active"><a href="#domain" data-toggle="tab">도메인이란?</a></li>
    <li><a href="#renew" data-toggle="tab">도메인 연장</a></li>
    <li><a href="#relocate" data-toggle="tab">기관 이전</a></li>
</ul> <!--ul.nav end-->

<div id="domain" class="tab-pane fade in active">
...
</div>
<div id="renew" class="tab-pane fade in active">
...
</div>

B 페이지 버튼
버튼 href에 해당탭 id를 넣는다.

<a href="#renew" data-toggle="tab">도메인 연장</a>

스크립트

$(function(){
    if (location.hash == "#domain"){
        $('.nav-tabs').find('li').eq(0).addClass('active').siblings().removeClass();
        $('.tab-content').find('#domain').addClass('active in').siblings().removeClass('active in');
    } else if(location.hash == "#renew"){
        $('.nav-tabs').find('li').eq(1).addClass('active').siblings().removeClass();
        $('.tab-content').find('#renew').addClass('active in').siblings().removeClass('active in');
    } else if(location.hash == "#relocate"){
        $('.nav-tabs').find('li').eq(2).addClass('active').siblings().removeClass();
        $('.tab-content').find('#relocate').addClass('active in').siblings().removeClass('active in');
    }
})