Recuerde qué pestaña estaba activa después de actualizar

Estoy usando tabs jquery en una página web y cuando la página se actualiza, pierde la pestaña en la que había estado y vuelve a la primera pestaña.

¿Alguien ha encontrado este problema y sabe cómo resolverlo?

Supongo que está usando las tabs jQuery UI,

Aquí hay un ejemplo del uso de tabs + cookies para guardar la última pestaña en la que se hizo clic

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

demo: abra este enlace http://jqueryui.com/demos/tabs/cookie.html

cierra y vuelve a abrirlo y verás la misma pestaña clicada

actualización: después de 3 años de esta respuesta, jquery ui ha dejado de usar la opción de cookies: http://jqueryui.com/upgrade-guide/1.9/#deprecated-cookie-option .

pero aún puede anexar echar un vistazo aquí si esto se ajusta a sus necesidades o no https://stackoverflow.com/a/14313315/109217

Al igual que otros, estaba luchando con mi historial de cookies de ui-tabs en jQueryUI 1.10. Gracias a la solución de Harry y a otra documentación en línea a la que me refiero en el siguiente código, ¡ahora tengo una solución que funciona sin cookies! Pude probar en Firefox 18.0.1 e IE 9.0.12. Según mis recursos, Chrome, Firefox, Safari e IE8 y versiones posteriores admiten el almacenamiento de sesiones.

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

Una alternativa más simple que acabo de implementar:

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

Esto agregará el valor hash a la url para que una actualización de página vuelva a cargar esa pestaña, y al usar location.replace lugar de location.hash , no llenaremos el historial del usuario con pasos indeseados.

Espero que ayude.

Ahora que la cookie se ha ido en jQuery UI 1.10.0, mezclé el enfoque de Gayathiri con las nuevas opciones y eventos:

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

Manera corta, independiente del diseño, de hacer esto usando localStorage :

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

Una forma específica de diseño de hacerlo utilizando atributos de datos personalizados (posiblemente útil si los valores de los atributos se usarían de alguna otra forma en el script).

jQuery UI:

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

Ejemplo de diseño HTML:

 
tab 1 stuff...
tab 2 stuff...
tab 3 stuff...

Cuando las páginas web se actualizan, vuelven a cargar su estado desde el servidor, al volver a solicitar la página.

O bien el servidor web necesita recordar el estado y suministrar el archivo de forma diferente al predeterminado, o puede usar cookies o el componente hash de la URL y algo de jQuery para almacenar el estado, leerlo al cargarlo y restaurarlo.

Consulte el plugin jquery.cookie o SWFaddress , aprenda cómo manipular valores hash usted mismo o el plugin jQuery History.

El método hash tiene una atracción particular ya que replica los cambios de URL, por lo que copiar / pegar de la URL sigue funcionando, al igual que los marcadores.

Incluye el plugin de cookies jquery:

  

declare un nombre de cookie dentro de $ .function ({.. o document.ready as

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

Otra opción es usar el almacenamiento html 5. Vea aquí para un ejemplo: http://www.w3schools.com/html/html5_webstorage.asp

Aquí hay una forma alternativa de permitir recordar la pestaña abierta por el elemento id (no índice). Esto es útil si usa este código para sincronizar las tabs abiertas en dos páginas diferentes con elementos similares (como mostrar y editar página).

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

Funciona con jQuery UI 1.10. ¡No olvides incluir el plugin jquery.cookie !

  

Puede usar el plugin jQuery History , aquí hay una demostración (cargar otro enlace en la demostración e intentar actualizar)

Mi empresa bloquea las cookies, así que encontré una solución. Simplemente haga un seguimiento de la pestaña usando un campo oculto y devuelva ese valor una vez que la solicitud haya finalizado. No es bonito, pero hace bien el trabajo.

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

En la parte de atrás acabo de establecer el atributo

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

Espero que esto ayude.

Puedes probar algo como esto, es bastante fácil de hacer.

 # 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 

¿Crees que puedes agregar la misma función en el siguiente código?

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

Lo usé en ASP.NET y funciona bien para mí. También tengo un botón en la segunda pestaña para mostrar un cuadro de diálogo y funciona perfecto.

Pooja Dhingra

Estoy resuelto el mismo problema con la ayuda del siguiente blog .

Pestaña HTML

   

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

Para mí funcionó, la sugerencia fue apreciada.

Hace poco tuve el mismo problema y pasé mucho tiempo mirando los documentos para el widget JQuery UI Tabs . Terminé usando los eventos activate y create para JQuery UI 1.10 así como localStorage para almacenar la pestaña actual antes de actualizar la página.

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

});