탭메뉴 링크 이동하기

1번 탭이 기본이고, 1번 탭일때는 2,3번이 display:none

2번 탭일땐 1,3번이 display:none

3번 탭일땐 1,2번이 display:none 입니다. 

아래와 같이 #링크를 주면 한 페이지에서 스크롤 상하로는 이동이 가능한데 각 탭 메뉴로 이동되게 하고 싶습니다.

주소창에서 sir.kr/#tab-1으로 들어가면 특별함이 나오고

sir.kr/#tab-2으로 들어가면 혜택이

sir.kr/#tab-3으로 들어가면 오시는 길이 나오게 하려면

탭 내용을 따로 빼서 연결하는 방법 밖에 없을까요?  

<style>

.tab-content{
    display: none;
}
.tab-content.current{
    display: inherit;
}
 

</style>

<!-- 탭메뉴-->
        <div class="tab_menu">
            <ul>
                <li class="tab-link current" data-tab="tab-1"><a href="#tab-1">특별함 </a></li>
                <li class="tab-link" data-tab="tab-2"><a href="#tab-2">이달의 혜택</a></li>
                <li class="tab-link" data-tab="tab-3"><a href="#tab-3">오시는 길</a></li>    
            </ul>
        </div>

<div class="content">

       <div id="tab-1" class="tab-content current">특별함 내용</div>

        <div id="tab-2" class="tab-content">이달의 혜택</div>

        <div id="tab-3" class="tab-content">오시는길 내용</div>

</div>

<script>

$(document).ready(function(){

$(".tab_menu ul li a").click(function(){
        $(this).css({"border-bottom":"3px solid #000"}).parent('li').siblings('li').children('a').css({"border-bottom":"3px solid #dfdfdf"});

    $('.tab_menu ul li').click(function(){
        var tab_id = $(this).attr('data-tab');

        $('.tab_menu ul li').removeClass('current');
        $('.tab-content').removeClass('current');

        $(this).addClass('current');
        $("#"+tab_id).addClass('current');
    })

    })

</script>