External Tabs — Menu à onglets accessibles depuis l’extérieur

Derrière ce titre un peu abscons se cache une astuce permettant d’accéder à un onglet et à une ancre spécifiques depuis une URL contenant les paramètres adéquats. L’idée est de pouvoir accéder au contenu des «tabs» sans être obligé de cliquer sur les onglets eux-mêmes. La proposition qui suit ne prétend pas être la meilleure dans le genre, mais elle a le mérite d’être fonctionnelle. 

External Tabs contient un bon morceau de de jQuery Tabs, quelques grumeaux de divers script comme Get URL parameters & values with jQuery pour la récupération des variables. La «Benoît Raux‘s touch» (@rauxbenoit) a fait le reste !

jQuery(function () {
  getUrlVars = function(){
    var vars = [], hash;
    var hashes = window.location.href.match(/([^?=&]+)(=([^&]*))?/g);
    for(var i = 0; i < hashes.length; i++){
      hash = hashes[i].split('=');
      vars.push(hash[0]);
      vars[hash[0]] = hash[1];
    }
    return vars;
  }
  var arrUrlParam = getUrlVars();
  var strSection = arrUrlParam['section'];
  var strAnchor = arrUrlParam['anchor'];
  // tabs
  var tabContainers = jQuery('div.tabs > div');
  tabContainers.hide().filter(':first').show();
  jQuery('ul.tabNavigation a').click(function () {
    tabContainers.hide();
    tabContainers.filter(this.hash).show();
    jQuery('ul.tabNavigation a').removeClass('selected');
    jQuery(this).addClass('selected');
    return false;
  });
  if(!strSection){
    jQuery('ul.tabNavigation a').filter(':first').click();
  } else {
    jQuery('ul.tabNavigation a[href="#'+strSection+'"]').click();
  }
  if(!strSection){
    jQuery('ul.tabNavigation a').filter(':first').click();
  } else {
    jQuery('ul.tabNavigation a[href="#'+strSection+'"]').click();
  }
  if(strAnchor){
    document.location.href='#'+strAnchor;
  }
  // eof tabs
});

Ainsi, pour accéder à l’ancre #montage qui se trouve dans l’onglet #stand, par exemple, il suffit de spécifier les paramètres section et anchor (si besoin) dans l’URL :

/index.php?section=stand&anchor=montage

→ External Tabs est sur Github.

N’hésitez pas à proposer des améliorations en terme de performances ou de concision.