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

J'ai essayé le code proposé par Xavi Martínez. Cela a fonctionné mais pas pour IE7. Le problème est que les onglets ne font référence à aucun contenu pertinent.
Donc, je préfère ce code pour résoudre ce problème.

function pageLoad() {
  $(document).ready(function() {

    var tabCookieName = "ui-tabs-1"; //nom du cookie
    var location = $.cookie(tabCookieName); //prendre le href de l'onglet

    if (location) {
      $('#Tabs a[href="' + location + '"]').tab('show'); //activer l'onglet
    }

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

    // lorsque le contenu est déjà affiché - événement activé
    $('#Tabs a').on('shown.bs.tab', function(e) {
      location = e.target.hash; // prendre l'href actuel
      $.cookie(tabCookieName, location, {
        path: '/'
      }); //écrire l'href dans le cookie
    })
  });
};

Answer 2

En plus de la réponse de Xavi Martínez évitant le saut au clic

Éviter le saut

$(document).ready(function(){

    // afficher l'onglet actif

    if(location.hash) {

        $('a[href=' + location.hash + ']').tab('show');
    }

    // définir le hash au clic sans saut

    $(document.body).on("click", "a[data-toggle]", function(e) {

        e.preventDefault();

        if(history.pushState) {

            history.pushState(null, null, this.getAttribute("href"));
        }
        else {

            location.hash = this.getAttribute("href");
        }

        $('a[href=' + location.hash + ']').tab('show');

        return false;
    });
});

// définir le hash sur popstate

$(window).on('popstate', function() {

    var anchor = location.hash || $("a[data-toggle=tab]").first().attr("href");

    $('a[href=' + anchor + ']').tab('show');
});

Onglets imbriqués

Implémentation avec le caractère "_" comme séparateur

$(document).ready(function(){

    // afficher l'onglet actif

    if(location.hash) {

        var tabs = location.hash.substring(1).split('_');

        $.each(tabs,function(n){

            $('a[href=#' + tabs[n] + ']').tab('show');
        });         

        $('a[href=' + location.hash + ']').tab('show');
    }

    // définir le hash au clic sans saut

    $(document.body).on("click", "a[data-toggle]", function(e) {

        e.preventDefault();

        if(history.pushState) {

            history.pushState(null, null, this.getAttribute("href"));
        }
        else {

            location.hash = this.getAttribute("href");
        }

        var tabs = location.hash.substring(1).split('_');

        //console.log(tabs);

        $.each(tabs,function(n){

            $('a[href=#' + tabs[n] + ']').tab('show');
        });

        $('a[href=' + location.hash + ']').tab('show');

        return false;
    });
});

// définir le hash sur popstate

$(window).on('popstate', function() {

    var anchor = location.hash || $("a[data-toggle=tab]").first().attr("href");

    var tabs = anchor.substring(1).split('_');

    $.each(tabs,function(n){

        $('a[href=#' + tabs[n] + ']').tab('show');
    });

    $('a[href=' + anchor + ']').tab('show');
});

Answer 3

Merci pour le partage.

En lisant toutes les solutions, j'ai trouvé une solution qui utilise le hachage d'URL ou le localStorage en fonction de la disponibilité de ce dernier avec le code ci-dessous :

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

    var hash = window.location.hash;
    var activeTab = localStorage.getItem('activeTab');

    if(hash){
          $('#project-tabs  a[href="' + hash + '"]').tab('show');   
    }else if (activeTab){
        $('#project-tabs a[href="' + activeTab + '"]').tab('show');
    }
});

Answer 4

Il y a une solution après avoir rechargé la page et en gardant l'onglet attendu sélectionné.

Supposons qu'après avoir enregistré les données, l'URL redirigée soit : mon_url#tab_2

Maintenant, grâce au script suivant, votre onglet attendu restera sélectionné.

$(document).ready(function(){
    var url = document.location.toString();
    if (url.match('#')) {
        $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
        $('.nav-tabs a').removeClass('active');
    }
});

Answer 5

Pour Bootstrap v4.3.1. Essayez ci-dessous :

$(document).ready(function() {
    var pathname = window.location.pathname; //obtenir le chemin de la page actuelle
    $('.navbar-nav > li > a[href="'+pathname+'"]').parent().addClass('active');
})