네비게이션탭을 새로고침시 탭을 유지할수 있을까요?
본문
굉장히 초보라 기초적으로만 하고 있는데요.
sir 메인을 보면 새로고침을 해도 보고 있는 탭이 유지가 되고 있거든요.
저는 부트스트랩3 네비게이션 탭으로 아래처럼 기본적인 탭을 쓰고 있는데요
<ul class="nav nav-tabs text-center" role="tablist">
<li class="active">
<a href="#main_1" data-toggle="tab">
메인1
</li>
<li>
<a href="#main_2" data-toggle="tab">
메인2
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="main_1" >
메인1의 내용
</div>
<div class="tab-pane fade " id="main_2" >
메인2의 내용
</div>
</div>
새로고침시 active 설정된 1번메뉴로 항상 다시 이동되고 있어요..
혹시..보고 있는 탭을 sir처럼 새로고침해도 유지할수 있는 코드가 있을까요?
스크립트를 이용하세요 라는 답변을 받아서..
오랫동안 천천히 찾아보고 있었는데..이게 부트스트랩 네비게이션탭에 관련된건 못찾는건지..
잘 모르겠더라구요.
혹시 아시는분 계시면 힌트나 조언좀 부탁드립니다~
$(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");
});
현재 위에 코드를 쓰고 있는데요.
새로고침하면 유지는 되는데..액티브 탭으로 갔다가 다시 오는 상황이라서 미관상 너무 안좋아서 안쓰는중에요 ㅠ
답변 1
저장소에 일부 데이터 추가해보면 될거에요
예시로 아래 소스코드 참고 해보세요.
응용해서 원하는 코드만 빼내서 쓰면 되요
$(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();
}
});
넵! 감사합니다 도전해보겠습니다 >.<
답변을 작성하시기 전에 로그인 해주세요.