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

Question

Je suis en train d'essayer de garder l'onglet sélectionné actif lors du rafraîchissement avec Bootstrap 3. J'ai essayé et vérifié avec certaines questions déjà posées ici mais rien 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' à la place de 'shown' dans la ligne suivante
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
//sauvegarde de l'onglet le plus récent; utilisez des cookies si vous les préférez:
localStorage.setItem('selectedTab', $(e.target).attr('id'));
});

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

Answer 1

Je préfère stocker l'onglet sélectionné dans la valeur de hachage de la fenêtre. Cela permet également d'envoyer des liens à des collègues, qui peuvent alors voir "la même" page. Le truc consiste à changer le hachage de l'emplacement lorsque un autre onglet est sélectionné. Si vous utilisez déjà # dans votre page, il est possible que le balise de hachage doit être séparée. Dans mon application, j'utilise ":" comme séparateur de valeur de hachage.

  Accueil
  Profil
  Messages
  Paramètres

  Accueil
  Profil
  Messages
  Paramètres

JavaScript doit être intégré après ce qui précède dans une partie ....

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

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

// lors du chargement de la page : passer à l'onglet actuellement sélectionné
var hash = window.location.hash;
$('#myTab a[href="' + hash + '"]').tab('show');

Answer 2

C'est le meilleur que j'ai essayé :

$(document).ready(function() {
    if (location.hash) {
        $("a[href='" + location.hash + "']").tab("show");
    }
    $(document.body).on("click", "a[data-toggle='tab']", function(event) {
        location.hash = this.getAttribute("href");
    });
});
$(window).on("popstate", function() {
    var anchor = location.hash || $("a[data-toggle='tab']").first().attr("href");
    $("a[href='" + anchor + "']").tab("show");
});

Answer 3

Un mélange entre d'autres réponses:

• Pas de saut lors du clic
• Enregistrer sur le hachage de l'emplacement
• Enregistrer sur localStorage (par exemple : pour soumettre un formulaire)

• Il suffit de copier-coller ;)

  if (location.hash) {
    $('a[href=\'' + location.hash + '\']').tab('show');
  }
  var activeTab = localStorage.getItem('activeTab');
  if (activeTab) {
    $('a[href="' + activeTab + '"]').tab('show');
  }
  
  $('body').on('click', 'a[data-toggle=\'tab\']', function (e) {
    e.preventDefault()
    var tab_name = this.getAttribute('href')
    if (history.pushState) {
      history.pushState(null, null, tab_name)
    }
    else {
      location.hash = tab_name
    }
    localStorage.setItem('activeTab', tab_name)
  
    $(this).tab('show');
    return false;
  });
  $(window).on('popstate', function () {
    var anchor = location.hash ||
      $('a[data-toggle=\'tab\']').first().attr('href');
    $('a[href=\'' + anchor + '\']').tab('show');
  });

Answer 4

Le code de Xavi fonctionnait presque entièrement. Mais lorsque je naviguais vers une autre page, soumettais un formulaire, puis étais redirigé vers la page avec mes onglets, l'onglet enregistré ne se chargeait pas du tout.

localStorage à la rescousse (code de Nguyen légèrement modifié) :

$('a[data-toggle="tab"]').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
});

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

var selectedTab = localStorage.getItem('selectedTab');
if (selectedTab != null) {
    $('a[data-toggle="tab"][href="' + selectedTab + '"]').tab('show');
}

Answer 5

Celui-ci utilise HTML5 localStorage pour stocker l'onglet actif

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

ref: http://www.tutorialrepublic.com/faq/how-to-keep-the-current-tab-active-on-page-reload-in-bootstrap.php https://www.w3schools.com/bootstrap/bootstrap_ref_js_tab.asp