JQuery 탭 - 새로 고침 할 때 동일한 탭 유지

탭이있는 콘텐츠로 Jquery를 사용하고 있습니다. 어떤 탭이든 관계없이 페이지를 새로 고침 할 때마다 항상 탭 번호 1로 돌아갑니다. 원래 탭에 머물러있게하려면 어떻게합니까?JQuery 탭 - 새로 고침 할 때 동일한 탭 유지

여기 당신의 도움에 대한 내 test site

감사합니다. document.location.hash를 사용

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://www.google.com/jsapi"></script> 
    <title>test</title> 
    <style type="text/css"> 
     #tabbed_box_1 { 
     width: 855px; 
     } 
     .tabbed_area { 
     background-color: #fff; 
     padding: 0px; 
     } 
     ul.tabs { 
     margin: 0px; 
     padding: 0px; 
     } 
     ul.tabs li { 
     display: inline; 
     list-style: none; 
     } 
     ul.tabs li a { 
     background-color: red; 
     border: 1px solid #111; 
     color: #fff; 
     font-size: 20px; 
     padding: 6px 16px; 
     } 
     ul.tabs li a:hover { 
     border-color: #111; 
     cursor: pointer; 
     } 
     ul.tabs li a.active { 
     background-color: #fff; 
     border: 1px solid #111; 
     color: #666; 
     cursor: pointer; 
     } 
     .tabrightcontent { 
     background-color: #fff; 
     border: 1px solid #111; 
     height: 500px; 
     padding: 20px; 
     } 
     #content_2, 
     #content_3, 
     #content_4, 
     #content_5 { 
     display: none; 
     } 
     ul.tabs { 
     margin: 0px; 
     margin-bottom: 0px; 
     margin-top: 0px; 
     padding: 0px; 
     } 
    </style> 
    </head> 
    <body> 
    <script> 
     $(document).ready(function() { 
     $(".tabs a").click(function() { 
      $(this).addClass("active").parent().siblings().find("a.active").removeClass("active"); 

      var id = $(this).parent().parent().find("a").index(this); 
      $(this).parent().parent().parent().find(".tabrightcontent").css({ 
      display: "none" 
      }).eq(id).css({ 
      display: "block" 
      }); 
     }); 
     }); 
    </script> 
    <div id="tabbed_box_1" class="tabbed_box"> 
     <div class="tabbed_area"> 
     <ul class="tabs"> 
      <li><a class="tab active">Tab Number 1</a></li> 
      <li><a class="tab">Tab Number 2</a></li> 
      <li><a class="tab">Tab Number 3</a></li> 
     </ul> 
     <div id="content_1" class="tabrightcontent"> 
      Tab Number 1 Content 
     </div> 
     <div id="content_2" class="tabrightcontent"> 
      Tab Number 2 Content 
     </div> 
     <div id="content_3" class="tabrightcontent"> 
      Tab Number 3 Content 
     </div> 
     </div> 
    </div> 
    </body> 
</html>

출처

2012-04-24 BobJIII

, 당신은 상쾌하지 않고 주소 표시 줄을 변경할 수 있습니다, 그래서 언제든지 당신은 탭을 클릭 (탭 ID와 같은) 뭔가 독특한에 document.location.hash을 변경합니다.

페이지로드시 document.location.hash를 확인하고 탭 ID 인 경우 해당 탭으로 전환하십시오.

출처

2012-04-24 20:00:51 DanRedux

탭을 만들 때 cookie 옵션을 사용하십시오.

은 자세한 내용은 jQuery UI 문서를 참조하지만, 여기에 예입니다

// Initialize a tabs with the cookie option specified. 
$(".selector").tabs({ cookie: { expires: 30 } }); 
// Get or set the cookie option, after init. 
//getter 
var cookie = $(".selector").tabs("option", "cookie"); 
//setter 
$(".selector").tabs("option", "cookie", { expires: 30 });

출처

2012-04-24 20:05:09 jarrad

감사 jarrad. https://github.com/carhartl/jquery-cookie에서 JQuery 쿠키 스크립트를 다운로드하고 내 문서의 헤더에 링크했습니다. 그런 다음 작성한 스크립트를 사용하여 헤더 닫기 태그 바로 앞에 스크립트 태그를 넣습니다. 그러나 아무 일도 일어나지 않습니다. 감사 – BobJIII

JQuery 탭 - 새로 고침 할 때 동일한 탭 유지

답변

관련 문제