Comment garder l'onglet actuel actif avec twitter bootstrap après un rechargement de la page ?

Question

J'utilise actuellement des onglets avec Twitter Bootstrap et je souhaite sélectionner le même onglet après qu'un utilisateur a posté des données et que la page se recharge.

Comment cela se fait-il ?

Mon appel actuel à inti les onglets ressemble à ceci :

<script type="text/javascript">

$(document).ready(function() {

    $('#profileTabs a:first').tab('show');
});
</script>

Mes onglets :

<ul id="profileTabs" class="nav nav-tabs">
    <li class="active"><a href="#profile" data-toggle="tab">Profile</a></li>
    <li><a href="#about" data-toggle="tab">About Me</a></li>
    <li><a href="#match" data-toggle="tab">My Match</a></li>
</ul>

Answer 1

Vous devrez utiliser localStorage ou des cookies pour gérer cela. Voici une solution rapide et sale qui peut être grandement améliorée, mais qui peut vous donner un point de départ :

$(function() { 
    // for bootstrap 3 use 'shown.bs.tab', for bootstrap 2 use 'shown' in the next line
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        // save the latest tab; use cookies if you like 'em better:
        localStorage.setItem('lastTab', $(this).attr('href'));
    });

    // go to the latest tab, if it exists:
    var lastTab = localStorage.getItem('lastTab');
    if (lastTab) {
        $('[href="' + lastTab + '"]').tab('show');
    }
});

Answer 2

J'ai obtenu ce résultat en utilisant des cookies et en supprimant la classe "active" de tous les autres onglets et volets d'onglets... et en ajoutant la classe "active" à l'onglet et au volet d'onglets actuels.

Je suis sûr qu'il y a une meilleure façon de faire, mais cela semble fonctionner dans ce cas.

Nécessite le plugin jQuery cookie.

$(function() { 
  $('a[data-toggle="tab"]').on('shown', function(e){
    //save the latest tab using a cookie:
    $.cookie('last_tab', $(e.target).attr('href'));
  });

  //activate latest tab, if it exists:
  var lastTab = $.cookie('last_tab');
  if (lastTab) {
      $('ul.nav-tabs').children().removeClass('active');
      $('a[href='+ lastTab +']').parents('li:first').addClass('active');
      $('div.tab-content').children().removeClass('active');
      $(lastTab).addClass('active');
  }
});

Answer 3

Toutes les autres réponses sont correctes. Cette réponse prend en compte le fait que l'on peut avoir de multiples ul.nav.nav-pills o ul.nav.nav-tabs sur la même page. Dans ce cas, les réponses précédentes échoueront.

Utilisant toujours localStorage mais avec un JSON comme valeur. Voici le code :

$(function() {
  var json, tabsState;
  $('a[data-toggle="pill"], a[data-toggle="tab"]').on('shown', function(e) {
    var href, json, parentId, tabsState;

    tabsState = localStorage.getItem("tabs-state");
    json = JSON.parse(tabsState || "{}");
    parentId = $(e.target).parents("ul.nav.nav-pills, ul.nav.nav-tabs").attr("id");
    href = $(e.target).attr('href');
    json[parentId] = href;

    return localStorage.setItem("tabs-state", JSON.stringify(json));
  });

  tabsState = localStorage.getItem("tabs-state");
  json = JSON.parse(tabsState || "{}");

  $.each(json, function(containerId, href) {
    return $("#" + containerId + " a[href=" + href + "]").tab('show');
  });

  $("ul.nav.nav-pills, ul.nav.nav-tabs").each(function() {
    var $this = $(this);
    if (!json[$this.attr("id")]) {
      return $this.find("a[data-toggle=tab]:first, a[data-toggle=pill]:first").tab("show");
    }
  });
});

Cette mèche peut être utilisée sur l'ensemble de l'application, sur toutes les pages, et fonctionnera aussi bien pour les onglets que pour les pilules. Aussi, assurez-vous que les onglets ou les pilules ne sont pas actifs par défaut sinon vous verrez un effet de scintillement au chargement de la page.

Important : Assurez-vous que le parent ul a un identifiant. Merci Alain

Answer 4

Pour la meilleure option, utilisez cette technique :

$(function() { 
  //for bootstrap 3 use 'shown.bs.tab' instead of 'shown' in the next line
  $('a[data-toggle="tab"]').on('click', function (e) {
    //save the latest tab; use cookies if you like 'em better:
    localStorage.setItem('lastTab', $(e.target).attr('href'));
  });

  //go to the latest tab, if it exists:
  var lastTab = localStorage.getItem('lastTab');

  if (lastTab) {
    $('a[href="'+lastTab+'"]').click();
  }
});

Answer 5

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 ainsi "la même" page. L'astuce consiste à modifier le hachage de l'emplacement lorsqu'un autre onglet est sélectionné. Si vous utilisez déjà # dans votre page, il est possible que la balise de hachage doive être divisée. Dans mon application, j'utilise " :" comme séparateur de valeur de hachage.

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#profile">Profile</a></li>
    <li><a href="#messages">Messages</a></li>
    <li><a href="#settings">Settings</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="home">home</div>
    <div class="tab-pane" id="profile">profile</div>
    <div class="tab-pane" id="messages">messages</div>
    <div class="tab-pane" id="settings">settings</div>
</div>

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

    // store the currently selected tab in the hash value
    $("ul.nav-tabs > li > a").on("shown.bs.tab", function (e) {
        var id = $(e.target).attr("href").substr(1);
        window.location.hash = id;
    });

    // on load of the page: switch to the currently selected tab
    var hash = window.location.hash;
    $('#myTab a[href="' + hash + '"]').tab('show');
</script>