记住刷新后哪个选项卡是活动的

我在网页上使用jquery选项卡,当页面刷新时,它会丢失我曾经浏览过的选项卡并返回到第一个选项卡。

有没有人遇到这个问题,并知道如何解决它?

我假设你正在使用jQuery UI选项卡,

这里是一个使用标签+ cookie来保存最后点击标签的例子

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

演示:打开这个链接http://jqueryui.com/demos/tabs/cookie.html

closures并重新打开它,你会看到相同的点击标签

更新:这个答案后3年jquery ui已弃用cookie选项: http : //jqueryui.com/upgrade-guide/1.9/#deprecated-cookie-option 。

但你仍然可以追加看看这里,如果这符合你的需要或不https://stackoverflow.com/a/14313315/109217

像其他人一样,我正在jQueryUI 1.10中使用我的UI标签历史logging。 感谢Harry的解决scheme和一些其他的在线文档,我在下面的代码中提到我现在有一个非cookie的解决scheme! 我能够在Firefox 18.0.1和IE 9.0.12中testing。 根据我的资源,Chrome,Firefox,Safari和IE8及以上版本都支持会话存储。

$(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 ) } }); }); 

我刚刚实施的一个更简单的select:

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

这将把哈希值添加到URL,所以页面刷新将重新加载该选项卡,并且通过使用location.replace而不是location.hash ,我们不会将用户的历史填充到不需要的步骤。

希望有所帮助。

现在,Cookie已经在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 }); } }); 

使用localStorage完成此项工作的简短布局无关的方法:

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

使用自定义数据属性的特定于布局的方式(如果在脚本的其他地方以某种方式使用属性值,则可能有用)。

jQuery UI:

 $("#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> 

当网页刷新时,他们从服务器重新加载状态,通过再次请求页面。

无论是networking服务器需要记住状态,并提供不同于默认的文件,或者您可能能够使用Cookie或URL的哈希组件和一些jQuery来存储状态,读取负载并恢复它。

请参阅jquery.cookie 插件或SWF地址 ,了解如何自己操作哈希值或jQuery历史logging插件。

哈希方法具有特别的吸引力,因为它复制URL的更改,所以URL的复制/粘贴仍然有效,书签也是如此。

包括jquery cookies插件:

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

在$ .function({..或document.ready as。)中声明一个cookie名称

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

另一个select是使用HTML 5存储。 看到这里的例子: http : //www.w3schools.com/html/html5_webstorage.asp

这是另一种允许通过元素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插件 !

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

你可以使用jQuery历史插件 ,这里是一个演示 (在演示中加载另一个链接,并尝试刷新)

我的公司阻止Cookie,所以我find了解决方法。 只需使用隐藏字段跟踪选项卡,并在请求完成后将该值传回。 这不是很好,但它完成了工作。

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

在后端,我只是设置属性

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

希望这可以帮助。

你可以尝试这样的事情,这很容易做到。

 # 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 

你认为你可以在下面的代码中添加相同的function。

 $(".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; }); 
  $(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使用它,它适用于我。 我也有第二个选项卡中的button来显示一些对话框,它的作品完美。

Pooja Dhingra

我在以下博客的帮助下解决了同样的问题。

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"); } 

对我来说,它的工作,build议表示赞赏。

我最近有同样的问题,并花了很长时间来看JQuery UI Tabs Widget的文档。 我最终使用的事件activatecreate JQuery UI 1.10以及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') }); } 

});