Le meilleur moyen de rendre persistants les onglets bootstrap de Twitter

Question

Quelle est la meilleure façon de faire persister ces onglets?

http://twitter.github.com/bootstrap/javascript.html#tabs

Pour ajouter du contexte, il s’agit d’une application rails. Je passe à ma vue un tableau [tab1, tab2], en rendant les deux onglets et en utilisant le plug-in d'amorçage pour changer leur visibilité.

Answer 1

Ce code sélectionne le bon onglet en fonction du #hash et ajoute le droit #hash quand un onglet est cliqué. (cela utilise jquery)

Dans Coffeescript:

 $(document).ready ->
    if location.hash != ''
        $('a[href="'+location.hash+'"]').tab('show')

    $('a[data-toggle="tab"]').on 'shown', (e) ->
        location.hash = $(e.target).attr('href').substr(1)
 

ou en JS:

 $(document).ready(function() {
    if (location.hash !== '') $('a[href="' + location.hash + '"]').tab('show');
    return $('a[data-toggle="tab"]').on('shown', function(e) {
      return location.hash = $(e.target).attr('href').substr(1);
    });
});
 

Answer 2

Je voulais améliorer la meilleure réponse ici ..

Le crédit va à Sucrenoir, mais si vous voulez éviter de sauter sur la page lorsque vous changez d'onglet, utilisez ce code amélioré:

 $(document).ready(function() {
    // show active tab on reload
    if (location.hash !== '') $('a[href="' + location.hash + '"]').tab('show');

    // remember the hash in the URL without jumping
    $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
       if(history.pushState) {
            history.pushState(null, null, '#'+$(e.target).attr('href').substr(1));
       } else {
            location.hash = '#'+$(e.target).attr('href').substr(1);
       }
    });
});
 

Answer 3

Voici un autre moyen de résoudre le problème.

Commencez par ajouter une ligne à l'événement click pour afficher le hachage dans la barre d'adresses.

 $('#myTab').on('click', 'a', function (e) {
  e.preventDefault();
  // add this line
  window.location.hash = $(this).attr('href');
  $(this).tab('show');
})
 

Assurez-vous ensuite que le bon onglet est activé onload en ajoutant cette partie à votre appel de document prêt.

 if(window.location.hash){
   $('#myTab').find('a[href="'+window.location.hash+'"]').tab('show');
}
 

Tous ensemble, vous pouvez écrire ceci:

 // cache the id
var navbox = $('#myTab');
// activate tab on click
navbox.on('click', 'a', function (e) {
  var $this = $(this);
  // prevent the Default behavior
  e.preventDefault();
  // set the hash to the address bar
  window.location.hash = $this.attr('href');
  // activate the clicked tab
  $this.tab('show');
})

// if we have a hash in the address bar
if(window.location.hash){
  // show right tab on load (read hash from address bar)
  navbox.find('a[href="'+window.location.hash+'"]').tab('show');
}
 

Answer 4

Vous pouvez obtenir le fragment d'URL (c'est la partie de l'URL après # ) au chargement en utilisant window.location.hash , et définir spécifiquement cet onglet comme visible:

 if (window.location.hash) {
    $(window.location.hash).tab('show')
}
 

Answer 5

Une autre version modifiée si vous ne voulez pas que des clics de tabulation soient ajoutés à l'historique, mais ne souhaitez pas non plus que la page saute de haut en bas:

 $(document).ready(function () {

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

  $("a[data-toggle='tab']").on("shown.bs.tab", function (e) {
    var hash = $(e.target).attr("href");
    if (hash.substr(0,1) == "#") {
      var position = $(window).scrollTop();
      location.replace("#" + hash.substr(1));
      $(window).scrollTop(position);
    }
  });

});