네비게이션탭을 새로고침시 탭을 유지할수 있을까요? 채택완료
헛둘헛둘
2년 전
조회 1,887
굉장히 초보라 기초적으로만 하고 있는데요.
sir 메인을 보면 새로고침을 해도 보고 있는 탭이 유지가 되고 있거든요.
저는 부트스트랩3 네비게이션 탭으로 아래처럼 기본적인 탭을 쓰고 있는데요
</p>
<p> <ul class="nav nav-tabs text-center" role="tablist"></p>
<p> <li class="active">
<a href="#main_1" data-toggle="tab">
메인1
</li> </p>
<p> <li>
<a href="#main_2" data-toggle="tab">
메인2
</li>
</ul></p>
<p> <div class="tab-content"></p>
<p> <div class="tab-pane fade in active" id="main_1" >
메인1의 내용
</div></p>
<p> <div class="tab-pane fade " id="main_2" >
메인2의 내용
</div></p>
<p> </div></p>
<p>
새로고침시 active 설정된 1번메뉴로 항상 다시 이동되고 있어요..
혹시..보고 있는 탭을 sir처럼 새로고침해도 유지할수 있는 코드가 있을까요?
스크립트를 이용하세요 라는 답변을 받아서..
오랫동안 천천히 찾아보고 있었는데..이게 부트스트랩 네비게이션탭에 관련된건 못찾는건지..
잘 모르겠더라구요.
혹시 아시는분 계시면 힌트나 조언좀 부탁드립니다~
</p>
<p>$(document).ready(function() {
if (location.hash) {
$("a[href='" + location.hash + "']").tab("show");
}
$(document.body).on("click", "a[data-toggle='tab']", function(event) {
location.hash = this.getAttribute("href");
});
});
$(window).on("popstate", function() {
var anchor = location.hash || $("a[data-toggle='tab']").first().attr("href");
$("a[href='" + anchor + "']").tab("show");
});</p>
<p>
현재 위에 코드를 쓰고 있는데요.
새로고침하면 유지는 되는데..액티브 탭으로 갔다가 다시 오는 상황이라서 미관상 너무 안좋아서 안쓰는중에요 ㅠ
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
2년 전
저장소에 일부 데이터 추가해보면 될거에요
예시로 아래 소스코드 참고 해보세요.
응용해서 원하는 코드만 빼내서 쓰면 되요
</p>
<p>$(document).ready(function() {
$("a.menu").click(function() {
$("#mp-menu").show();
localStorage.setItem("show-mp-menu", true);
});
if (localStorage.getItem("show-mp-menu")) {
$("#mp-menu").show();
}
});</p>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
헛둘헛둘
2년 전
넵! 감사합니다 도전해보겠습니다 >.<
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인