디자인을 잘 못하는 저는 bootstrap 을 자주 이용합니다.
가끔 tabs를 이용하는 경우가 있는데 탭을 클릭하면 탭에 맞는 정보를 보여주고 문제가 없지만
새로고침을 했을 경우 문제?가 발생합니다.
예를 들어 1, 2, 3번 탭 중에 3번 탭을 클릭하면 3번 탭의 내용이 보여 집니다.(여기까진 좋지만)
이 상황에서 새로고침을 누르면 보통 1(첫번째)번 탭으로 돌아가버립니다.
크게 문제 될것은 없지만 제가 하고 싶은것은
3번탭을 클릭후 새로 고침을 해도 다시 3번탭의 내용이 보여지기
기본 부트스트랩 탭
HomeProfileMessagesSettings
보통 이것만으로도 문제 없이 사용 가능합니다.
location.hash를 이용해서
HomeProfileMessagesSettings
location.hash에 클릭한 탭의 href요소를 넣어주면 페이지는 그래로지만 주소창에 url은 변경
히스토리도 변경 되므로 뒤로가기 하면 전 주소가 보여집니다.
window.addEventListener("popstate", function(e) {
SelectTab();
});
popstate이벤트가 발생할때 살짝 탭을 이동하는 함수를 불러주면 탭이 변경
마치며
더 좋은 방법이 있는지는 잘 모르겠지만 제가 원하는 동작은 하고 있으므로 여기서 종료^^
반응형