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

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 verront alors 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 tag de hachage doive être divisé. 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 : basculer sur 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 au clic
• Enregistrer dans le hachage de l'emplacement
• Enregistrer dans localStorage (par exemple : pour soumettre un formulaire)

• Il suffit de copier et 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 parfaitement. Mais lors de la navigation vers une autre page, la soumission d'un formulaire, puis la redirection vers la page avec mes onglets ne chargeait pas du tout l'onglet enregistré.

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

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