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

En utilisant html5, j'ai concocté ceci :

Quelque part sur la page :

Some random text

Le viewbag ne devrait contenir que l'identifiant de la page/de l'élément, par exemple : "testing"

J'ai créé un site.js et ajouté le script sur la page :

/// 
$(document).ready(
  function() {
    var setactive = $("#heading").data("activetab");
    var a = $('#' + setactive).addClass("active");
  }
)

Maintenant, tout ce que vous avez à faire est d'ajouter vos identifiants à votre barre de navigation. Par exemple :

    @Html.ActionLink("Lalala", "MyAction", "MyController")

Tout honneur à l'attribut de données :)

Answer 2

Nous avons utilisé jQuery trigger pour exécuter un script qui appuie sur le bouton lors du chargement de la page

$(".nom_de_classe").trigger('click');

Answer 3

Il y a tellement de façons de faire cela. J'ai pensé à ceci, court et simple.

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

  $('.nav-tabs a').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash;
    if(e.target.hash == "#activity"){
      $('.nano').nanoScroller();
    }
  })

Answer 4

Dans la fonction setTab, j'ai reçu le nom de la classe en tant que paramètre pour l'onglet et je l'ai enregistré dans le stockage local. Dans la fonction ready du document, j'ai vérifié si la classe active existe ou non. Si elle existe, je définis cet onglet comme actif sinon je définis l'onglet de base comme actif

$(document).ready(function() {
   var activeTab = localStorage.getItem('activeTab');
   if (activeTab) {
      $('#v-pills-'+activeTab+'-tab').addClass('active');
      $('#v-pills-'+activeTab).addClass('show active');
   } else {
      $('#v-pills-basic-tab').addClass('active');
      $('#v-pills-basic').addClass('show active');
   }
})

function setTab(params) {
  localStorage.setItem('activeTab', params);
}