Blog

[Javascript] Tab Navigation에서 최근 탭 활성화하기

May 4, 2015

[Javascript] Tab Navigation에서 최근 탭 활성화하기

현재 작업 중인 사이트에서 Tab Navigation이 필요한데, 시중에 잘 만들어진 라이브러리들이 하나 단점이 있어서 몇 차례 반복하면서 작업했었다. 탭이 5개가 있다고 가정했을 때, 2번째 탭이 활성화 된 상태에서 다른 페이지를 간 다음에 다시 Back했을 때 2번째 탭이 아닌 1번째 탭이 활성화된다는 것이었다.
 
의외로 원하는 탭을 활성화하기가 쉽지 않아서, 진도가 나가질 않다가 좋은 방법을 찾아서 기록 및 공유한다.
 
Codyhouse의 Responsive Tabbed Navigiation 코드를 보면, 굉장히 깔끔하게 제작되어 있는 것을 볼 수 있다. 아래 코드는 위 링크를 클릭하면 확인할 수 있는 샘플 코드다.
 

<div class="cd-tabs">
    <nav>
        <ul class="cd-tabs-navigation">
            <li><a data-content="inbox" class="selected" href="#0">Inbox</a></li>
            
            <li><!-- ... --></li>
        </ul> <!-- cd-tabs-navigation -->
    </nav>
 
    <ul class="cd-tabs-content">
        <li data-content="inbox" class="selected">
            <p>Inbox Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum recusandae rem animi accusamus quisquam reprehenderit sed voluptates, numquam, quibusdam velit dolores repellendus tempora corrupti accusantium obcaecati voluptate totam eveniet laboriosam?</p>
 
            <p>Inbox Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum recusandae rem animi accusamus quisquam reprehenderit sed voluptates, numquam, quibusdam velit dolores repellendus tempora corrupti accusantium obcaecati voluptate totam eveniet laboriosam?</p>
        </li>
 
        <li><!-- ... --></li>
    </ul> <!-- cd-tabs-content -->
</div> <!-- cd-tabs -->

 
class=“selected” 한 줄이면 탭 활성화를 설정할 수 있어서, 매우 간편하다. Back버튼을 눌렀을 때 hash 값을 읽어와서, 가장 마지막의 탭을 활성화시켜야 하는데 아래와 같이 구현하였다.
 

<li><a id="tab_first" data-content="first" href="#" onClick="javascript:changeHash('#first');">첫번째 탭</a></li>
<li><a id="tab_second" data-content="second" href="#" onClick="javascript:changeHash('#second');">두번째 탭</a></li>
<li><a id="tab_third" data-content="third" href="#" onClick="javascript:changeHash('#third');">세번째 탭</a></li>


<script>
    if(window.location.hash) {
        document.getElementById("tab_"+window.location.hash.substr(1)).className="selected";        
        document.getElementById("content_"+window.location.hash.substr(1)).className="tab selected";        
    } else {
        document.getElementById("tab_first").className="selected";
        document.getElementById("content_first").className="tab selected";
    }
    
    function changeHash(str) { 
        window.location.hash=str;
    }

</script>

 
hash 값이 없으면 첫번째 탭을 활성화하고, 그렇지 않을 경우 해당되는 탭이 활성화되도록 설정. 막혀서 골치였던 문제였는데 좋은 코드를 구한 덕분에 잘 해결됐다 :)