记住刷新后哪个选项卡是活动的
我在网页上使用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的文档。 我最终使用的事件activate和create 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') }); }
}）;
