Comment puis-je conserver l'onglet Bootstrap sélectionné lors du rafraîchissement de la page?

Question

Je tente de garder l'onglet sélectionné actif lors du rafraîchissement avec Bootstrap 3. J'ai essayé et vérifié avec des questions déjà posées ici mais aucune ne fonctionne pour moi. Je ne sais pas où je me trompe. Voici mon code

HTML

    Informations personnelles
    Informations sur l'emploi
    Parcours professionnel
    Avertissement

        données de l'onglet ici...

        données de l'onglet ici...

        données de l'onglet ici...

        données de l'onglet ici...

Javascript:

// onglet
$('#rowTab a:first').tab('show');

//pour bootstrap 3, utilisez 'shown.bs.tab' au lieu de 'shown' dans la ligne suivante
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
//sauvegarder le dernier onglet; utilisez des cookies si vous les préférez:
localStorage.setItem('selectedTab', $(e.target).attr('id'));
});

//aller à l'onglet le plus récent, s'il existe:
var selectedTab = localStorage.getItem('selectedTab');
if (selectedTab) {
  $('#'+selectedTab).tab('show');
}

Answer 1

Eh bien, nous sommes déjà en 2018 mais je pense qu'il vaut mieux tard que jamais (comme un titre dans un programme télé), lol. Ci-dessous se trouve le code jQuery que j'ai créé pendant ma thèse.

$(document).ready(function(){
    $('a[data-toggle="tab"]').on('show.affectedDiv.tab', function(e) {
        localStorage.setItem('activeTab', $(e.target).attr('href'));
    });
    var activeTab = localStorage.getItem('activeTab');
    if(activeTab){
        $('#myTab a[href="' + activeTab + '"]').tab('show');
    }
});

et voici le code pour les onglets bootstrap :

        Section A
        Section B
        Section C

            Section A
            Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.

            Section B
            Vestibulum nec erat eu nulla rhoncus fringilla ut non neque. Vivamus nibh urna, ornare id gravida ut, mollis a magna. Aliquam porttitor condimentum nisi, eu viverra ipsum porta ut. Nam hendrerit bibendum turpis, sed molestie mi fermentum id. Aenean volutpat velit sem. Sed consequat ante in rutrum convallis. Nunc facilisis leo at faucibus adipiscing.

            Section C
            Vestibulum nec erat eu nulla rhoncus fringilla ut non neque. Vivamus nibh urna, ornare id gravida ut, mollis a magna. Aliquam porttitor condimentum nisi, eu viverra ipsum porta ut. Nam hendrerit bibendum turpis, sed molestie mi fermentum id. Aenean volutpat velit sem. Sed consequat ante in rutrum convallis. Nunc facilisis leo at faucibus adipiscing.

N'oubliez pas d'appeler les éléments fondamentaux tels que Bootstrap

voici quelques codes rapides pour vous:

Passons maintenant à l'explication :

Le code jQuery dans l'exemple ci-dessus récupère simplement la valeur de l'attribut href de l'élément a lorsqu'un nouvel onglet est affiché en utilisant la méthode .attr() de jQuery et la sauvegarde localement dans le navigateur de l'utilisateur via l'objet HTML5 localStorage. Plus tard, lorsque l'utilisateur rafraîchit la page, il récupère ces données et active l'onglet correspondant via la méthode .tab('show').

Vous cherchez des exemples? en voici un pour vous les gars.. https://jsfiddle.net/Wineson123/brseabdr/

J'espère que ma réponse pourra vous aider.. Cheerio! :)

Answer 2

En me basant sur les réponses fournies par Xavi Martínez et koppor, j'ai trouvé une solution qui utilise le hash d'URL ou localStorage en fonction de la disponibilité de ce dernier :

function rememberTabSelection(tabPaneSelector, useHash) {
    var key = 'selectedTabFor' + tabPaneSelector;
    if(get(key)) 
        $(tabPaneSelector).find('a[href=' + get(key) + ']').tab('show');

    $(tabPaneSelector).on("click", 'a[data-toggle]', function(event) {
        set(key, this.getAttribute('href'));
    }); 

    function get(key) {
        return useHash ? location.hash: localStorage.getItem(key);
    }

    function set(key, value){
        if(useHash)
            location.hash = value;
        else
            localStorage.setItem(key, value);
    }
}

Utilisation :

$(document).ready(function () {
    rememberTabSelection('#rowTab', !localStorage);
    // Faire du travail...
});

Cela ne suit pas le bouton retour, comme c'est le cas pour la solution de Xavi Martínez.

Answer 3

Mon code, cela fonctionne pour moi, j'utilise localStorage HTML5

$('#tabHistory  a').click(function(e) {
  e.preventDefault();
  $(this).tab('show');
});
$("ul.nav-tabs#tabHistory > li > a").on("shown.bs.tab", function(e) {
  var id = $(e.target).attr("href");
  localStorage.setItem('selectedTab', id)
});
var selectedTab = localStorage.getItem('selectedTab');
$('#tabHistory a[href="' + selectedTab + '"]').tab('show');

Answer 4

J'ai essayé ceci et ça fonctionne :

    jQuery(document).ready(function() {
        jQuery('a[data-toggle="pill"]').on('show.bs.tab', function(e) {
            localStorage.setItem('activeTab', jQuery(e.target).attr('href'));
        });

        // Ici, enregistrez l'index auquel correspond l'onglet. Vous pouvez le voir 
        // dans l'outil de développement de Chrome.
        var activeTab = localStorage.getItem('activeTab');

        // Dans la console, vous verrez l'onglet sur lequel vous avez cliqué en dernier 
        // et l'enregistrement dans "activeTab". Je vous laisse la console pour que vous 
        // le voyiez. Et lorsque vous rafraîchissez le navigateur, celui sur lequel vous 
        // avez cliqué en dernier restera actif.
        console.log(activeTab);

        if (activeTab) {
           jQuery('a[href="' + activeTab + '"]').tab('show');
        }
    });

J'espère que cela aidera quelqu'un.

Voici le résultat : https://jsfiddle.net/neilbannet/ego1ncr5/37/

Answer 5

Étant donné que je ne peux pas encore commenter, j'ai copié la réponse ci-dessus, elle m'a vraiment aidé. Mais je l'ai modifiée pour fonctionner avec des cookies au lieu de #id afin de partager les modifications. Cela permet de conserver l'onglet actif plus longtemps qu'un simple rafraîchissement (par exemple, plusieurs redirections) ou lorsque l'identifiant est déjà utilisé et que vous ne voulez pas mettre en œuvre la méthode split de koppors.

    Accueil
    Profil
    Messages
    Paramètres

    accueil
    profil
    messages
    paramètres

$('#myTab a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
});

// stocker l'onglet actuellement sélectionné dans la valeur de hash
$("ul.nav-tabs > li > a").on("shown.bs.tab", function (e) {
    var id = $(e.target).attr("href").substr(1);
    $.cookie('activeTab', id);
});

    // au chargement de la page: basculer vers l'onglet actuellement sélectionné
    var hash = $.cookie('activeTab');
    if (hash != null) {
        $('#myTab a[href="#' + hash + '"]').tab('shoFrench
    }