Se souvenir de l'onglet actif après un rafraîchissement

Question

J'utilise des onglets jquery sur une page web et lorsque la page est rafraîchie, elle perd l'onglet sur lequel j'étais et revient au premier onglet.

Quelqu'un a-t-il rencontré ce problème et sait-il comment le résoudre ?

Answer 1

Comme d'autres, j'ai eu des difficultés avec l'historique des cookies de mes ui-tabs dans jQueryUI 1.10. Grâce à la solution de Harry et à d'autres documents en ligne auxquels je fais référence dans le code ci-dessous, j'ai maintenant une solution fonctionnelle sans cookie ! J'ai pu la tester dans Firefox 18.0.1 et IE 9.0.12. D'après mes ressources, Chrome, Firefox, Safari et IE8 et supérieur prennent en charge le stockage de session.

  $(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 2

Je suppose que vous utilisez les onglets jQuery UI ,

voici un exemple d'utilisation des onglets + cookies pour sauvegarder le dernier onglet cliqué

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

démo : ouvrir ce lien http://jqueryui.com/demos/tabs/cookie.html

fermez-le et ouvrez-le à nouveau et vous verrez le même onglet cliqué.

mettre à jour : après 3 ans de cette réponse, l'interface utilisateur de jquery a déprécié l'option cookie : http://jqueryui.com/upgrade-guide/1.9/#deprecated-cookie-option .

mais vous pouvez toujours ajouter des annexes, regardez ici si cela correspond à vos besoins ou non. https://stackoverflow.com/a/14313315/109217

Answer 3

Je viens de mettre en place une alternative plus simple :

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

Cela ajoutera la valeur de hachage à l'url de sorte qu'un rafraîchissement de la page rechargera l'onglet en question. location.replace plutôt que location.hash nous ne remplissons pas l'historique de l'utilisateur avec des retours en arrière non désirés.

J'espère que cela vous aidera.

Answer 4

Maintenant que le cookie a disparu dans jQuery UI 1.10.0, j'ai mélangé l'approche de Gayathiri avec les nouvelles options et événements :

// 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 5

Lorsque les pages web se rafraîchissent, elles rechargent leur état depuis le serveur, en demandant à nouveau la page.

Soit le serveur Web doit se souvenir de l'état et fournir le fichier différemment de la valeur par défaut, soit vous pouvez utiliser des cookies ou la composante de hachage de l'URL et un peu de jQuery pour stocker l'état, le lire au chargement et le restaurer.

Voir le plugin jquery.cookie o SWFaddress , apprenez à manipuler vous-même les valeurs de hachage ou le plugin jQuery History.

La méthode du hachage présente un attrait particulier car elle reproduit les changements d'URL, de sorte que le copier/coller de l'URL fonctionne toujours, tout comme les signets.