Live Brilliant

[Jquery] 탭메뉴 페이지 새로고침시 현재탭 유지 본문

개발은 핵찜이야/JQUERY

[Jquery] 탭메뉴 페이지 새로고침시 현재탭 유지

주인정 2015. 2. 24. 11:01

[문제]

DOM 에서 탭메뉴로 페이지 구성시 새로고침을 하게되면 첫번째 탭메뉴 페이지가 나오는 문제


[해결]

$(document).ready(function(){

   var link = document.location.href;  //현재 접속 url  

   var tab = link.split('/').pop();   //배열의 맨 마지막 요소를 삭제하고 삭제된 해당 값을 반환함

   $('a[href$='+tab+']').trigger("click"); //해당 앵커 트리거를이용 클릭 이벤트

});


<ul>

  <li><a href="#1">Link one</a></li>

  <li><a href="#2">Link two</a></li>

  <li><a href="#3">Link three</a></li>

  <li><a href="#4">Link four</a></li>

</ul>


4번째 탭메뉴를 클릭하면 http://url/#4 주소가 된다 

새로고침시 접속 url 에서 마지막 세그먼트를 찾고 해당 앵커 트리거로 클릭 이벤트 

끝~

Comments