請記住刷新後哪個選項卡處於活動狀態

Question

我在網頁上使用jquery選項卡並刷新頁面時，它丟失了曾經選中的選項卡並返回到第一個選項卡。

有沒有人遇到過這個問題，並知道如何解決它？

Answer 1

我假設你正在使用jQuery UI選項卡，

這裏是使用標籤+ cookies來保存最後點擊選項卡

http://jqueryui.com/demos/tabs/#cookie

演示的一個例子： 打開此鏈接 http://jqueryui.com/demos/tabs/cookie.html

關閉它並重新打開它，您將看到相同的點擊標籤

更新： 3年多瞭解這個答案jquery ui已棄用cookie選項：http://jqueryui.com/upgrade-guide/1.9/#deprecated-cookie-option。

，但你仍然可以追加看看這裏，如果這符合您的需要或不https://stackoverflow.com/a/14313315/109217

Answer 2

可以使用jQuery History plugin，這裏是一個demo（加載演示另一個鏈接，然後嘗試刷新）

Answer 3

當網頁刷新，他們重新從服務器的狀態，再次請求頁面。

Web服務器需要記住狀態並以不同於默認值的方式提供文件，或者您可以使用Cookie或URL的哈希組件和一些jQuery來存儲狀態，恢復它。

請參閱jquery.cookie plugin或SWFaddress，瞭解如何自己操作哈希值或jQuery歷史記錄插件。

哈希方法具有特別的吸引力，因爲它複製URL的更改，所以URL的複製/粘貼仍然有效，書籤也一樣。

Answer 4

我公司塊餅乾，所以我找到了解決辦法。只需使用隱藏字段跟蹤選項卡，並在請求完成後將該值傳回。這不是很好，但它完成了工作。

<% if(request.getAttribute("tab")==null) { %> 
    $("#tabs").tabs(); 
<% } else { %> 
    $("#tabs").tabs({selected:<%=request.getAttribute("tab").toString() %>}); 
<% } %> 

在後端我剛纔設置的屬性

request.setAttribute("tab", f.get("tab").toString()); 

希望這有助於。

Answer 5

一個簡單的替代我剛剛實施：

$(".tabs").tabs({ 
    select: function(event, ui) {     
     window.location.replace(ui.tab.hash); 
    }, 
}); 

這將哈希值添加到URL，從而刷新頁面會將該選項卡，並通過使用location.replace而不是location.hash，我們不補用戶的歷史記錄隨着不需要的步驟回來。

希望有所幫助。

Answer 6

您是否認爲您可以在下面的代碼中添加相同的功能。

$(".menu > li").click(function(e){ 
    $(".content." + $(".menu > .active").attr("id")).fadeOut("fast", function() { 
     $(".content." + e.target.id).fadeIn(); 
     $(".menu > #" + e.target.id).addClass("active"); 
    }); 

    $(".menu > .active").removeClass("active"); 

    return true; 

}); 

Answer 7

包括jQuery的餅乾插件：

<script type="text/javascript" src="/resources/js/jquery.cookies.2.2.0.min.js"></script> 

聲明cookie名稱在$。功能（{..或作爲的document.ready

var cookieName = "mycookie"; 

$("#tabs").tabs({ 
    selected : ($.cookies.get(cookieName) || 0), 
    select : function(e, ui) { 
     $.cookies.set(cookieName, ui.index); 
    } 
     }); 

Answer 8

你可以嘗試這樣的事情，這很容易做到。

# Set selected_tab to the correct index based on the current url anchor hash 
selected_tab = 0 
if matches = /#(\w+)/.exec(window.location.hash) 
    # find the index of the tab with the given id 
    selected_tab = $('#' + matches[1]).index() - 1 

# Initialize the tabs and set 'selected' to equal the selected_tab variable we just set 
$('.tabable').tabs 
    selected: selected_tab, # this is where the magic happens 
    select: (evt, ui) -> 
    window.location.hash = ui.panel.id # set an anchor tag in the url with the tab id 

Answer 9

現在，餅乾是jQuery UI的1.10.0走了，我混Gayathiri的新選項和事件的方法：

// using cookie plugin from https://github.com/carhartl/jquery-cookie 

var tabCookieName = "ui-tabs-1"; 
$(".tabs").tabs({ 
    active : ($.cookie(tabCookieName) || 0); 
    activate : function(event, ui) { 
     var newIndex = ui.newTab.parent().children().index(ui.newTab); 
     // my setup requires the custom path, yours may not 
     $.cookie(tabCookieName, newIndex, { path: window.location.pathname }); 
    } 
}); 

Answer 10

與其他人一樣，我有我的用戶界面的選項卡餅乾歷史jQueryUI的1.10掙扎。 感謝Harry的解決方案和我在下面的代碼中提到的一些其他在線文檔，現在我有一個可用的非cookie解決方案！我能夠在Firefox 18.0.1和IE 9.0.12中測試。根據我的資源，Chrome，Firefox，Safari和IE8 &以上都支持Session Storage。

$(function() { 
    // jQueryUI 1.10 and HTML5 ready 
    //  http://jqueryui.com/upgrade-guide/1.10/#removed-cookie-option 
    // Documentation 
    //  http://api.jqueryui.com/tabs/#option-active 
    //  http://api.jqueryui.com/tabs/#event-activate 
    //  http://balaarjunan.wordpress.com/2010/11/10/html5-session-storage-key-things-to-consider/ 
    // 
    // Define friendly index name 
    var index = 'key'; 
    // Define friendly data store name 
    var dataStore = window.sessionStorage; 
    // Start magic! 
    try { 
     // getter: Fetch previous value 
     var oldIndex = dataStore.getItem(index); 
    } catch(e) { 
     // getter: Always default to first tab in error state 
     var oldIndex = 0; 
    } 
    $('#tabs').tabs({ 
     // The zero-based index of the panel that is active (open) 
     active : oldIndex, 
     // Triggered after a tab has been activated 
     activate : function(event, ui){ 
      // Get future value 
      var newIndex = ui.newTab.parent().children().index(ui.newTab); 
      // Set future value 
      dataStore.setItem(index, newIndex) 
     } 
    }); 
    }); 

Answer 11

$(function() { 

     $("#dialog").dialog({ 
      autoOpen: false, 
      show: { 
       effect: "blind", 
       duration: 1000 
      }, 
      hide: { 
       effect: "explode", 
       duration: 1000 
      } 
     }); 

     //$(function() { 
      $("#tabs").tabs({ 
        select: function (event, ui) {      
        document.location.href = ui.tab.href;       
       } 
      }).show(); 

     //}); 

        $("#MainContent_button1").click(function (event) {       
         event .preventDefault(); 
         $("#dialog").dialog("open");       
        }); 
    }); 

我用它在ASP.NET，它爲我工作得很好。我也在第二個標籤中有一個按鈕來顯示一些對話框，它的工作原理非常完美。

Pooja Dhingra

Answer 12

另一種選擇是使用html 5存儲。在這裏看到的例子：http://www.w3schools.com/html/html5_webstorage.asp

Answer 13

這是一種替代方法，以允許由元素ID（不索引）記住打開的選項卡。如果您使用此代碼將兩個不同頁面上打開的選項卡與相似的元素（如顯示和編輯頁面）同步，這很有用。

var tabsid = "#tabs"; 
var cookieid = "tabs_selected2"; 

var activetabnr = 0; 
if (($.cookie(cookieid)!=null) && ($.cookie(cookieid)!="")) { 
    activetabnr = $(tabsid+' a[href="'+$.cookie(cookieid)+'"]').parent().index(); 
} 

$(tabsid).tabs({ 
    active: $(tabsid).tabs({ active: activetabnr }), 
    beforeActivate: function (event, ui) { 
     $.cookie(cookieid, "#"+ui.newPanel.attr('id')); 
    } 
}); 

適用於jQuery UI 1.10。 不要忘了包括jquery.cookie plugin！這樣使用localStorage的

<script type="text/javascript" src="/js/jquery.cookie.js"></script> 

Answer 14

短，佈局無關的方式：

$("#tabs").tabs({ 
    active: localStorage.getItem("currentIdx"), 
    activate: function(event, ui) { 
     localStorage.setItem("currentIdx", $(this).tabs('option', 'active')); 
    } 
}); 

---

使用自定義數據屬性（如果屬性值分別爲以可能有用做它的具體佈局方式在腳本的其他地方以某種方式使用）。

jQuery用戶界面：

$("#tabs").tabs({ 
    active: localStorage.getItem("currentTabIndex"), 
    activate: function(event, ui) { 
     localStorage.setItem("currentTabIndex", ui.newPanel[0].dataset["tabIndex"]); 
    } 
}); 

例HTML佈局：

<div id="tabs"> 
    <div id="tabs-1" data-tab-index="0"> 
     tab 1 stuff... 
    </div> 
    <div id="tabs-2" data-tab-index="1"> 
     tab 2 stuff... 
    </div>  
    <div id="tabs-3" data-tab-index="2"> 
     tab 3 stuff... 
    </div> 
</div> 

Answer 15

我有以下blog的幫助下解決了同樣的問題。

HTML標籤

<ul class="tabs clear-fix"> 
    <li class=""><a href="#tab=java" id="tab1-tab"><i class=" fa fa-search-plus fa-lg" style="font-size:16px; "></i>JAVA</a><span></span></li> 
    <li class=""><a href="#tab=js" id="tab2-tab"><i class=" fa fa-user fa-lg" style="font-size:16px;"></i>JAVA SCRIPT</a><span></span></li> 
    <li><a href="#tab=c" id="tab3-tab"><i class="fa fa-archive fa-lg" style="font-size:16px;"></i>C</a><span></span></li> 
    <li><a href="#tab=c2" id="tab4-tab"><i class=" fa fa-gift fa-lg" style="font-size:16px;"></i>C++</a><span></span></li> 
    <li><a href="#tab=jQ" id="tab5-tab"><i class=" fa fa-heart fa-lg" style="font-size:16px;"></i>jQuery</a><span></span></li> 
    </ul> 

的Javascript

var selectedTab = window.location.href.split("#tab=")[1] ; 
    var selectedId = $('a[href$=' + selectedTab+']:first').attr('id'); 

    if (typeof selectedId === "undefined") { 
     $('#tab1-tab').trigger("click"); 
    } 
    else{ 
     $('#'+selectedId).trigger("click"); 
    } 

對於我來說它的工作，建議讚賞。

Answer 16

我最近有同樣的問題，並花了很長時間看文檔JQuery UI Tabs Widget。我最終使用了針對JQuery UI 1.10的事件activate和create以及localStorage在頁面刷新之前存儲當前標籤。

$(".selector").tabs({             
    activate: function(event, ui) { 
     //when tab is activated store it's index in activeTabIndex 
      var activeTabIndex = $('.tabs').tabs('option','active'); 
     //add activeTabIndex to localStorage and set with key of 'currentTab' 
      localStorage.setItem('currentTab', activeTabIndex); 
         }, 
     create: function(event, ui) { 
      $(".tabs").tabs({  
     //when tabs are created on page refresh, the active tab is set to index of 'currentTab' 
     //after getItem from localStorage 
     active: localStorage.getItem('currentTab') 
    }); 
    } 

}）;