JQuery選項卡 - 刷新時保持相同的標籤

我正在使用帶有標籤內容的Jquery。無論我在什麼標籤頁上，每當刷新頁面時，它總是返回到標籤號1.如何使它保持在原來的標籤上？JQuery選項卡 - 刷新時保持相同的標籤

這裏是我的test site

感謝您的幫助。

<!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

使用document.location.hash，你可以改變地址欄不清爽，所以任何時候你點擊一個選項卡，更改document.location.hash獨特（如標籤ID）的東西。

然後在頁面加載時檢查document.location.hash，如果它是標籤的標識，則切換到該標籤。

來源

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 cookie腳本，並將其鏈接到我的文檔的標題中。然後，我使用您編寫的腳本，並將它放在標頭關閉標記之前的腳本標記內。但沒有任何反應。謝謝 – BobJIII 2012-04-24 21:05:39

JQuery選項卡 - 刷新時保持相同的標籤

回答

相關問題