Como detectar que un link hash a cambiado con jQuery

Hola amig@s.

Hoy les quiero hablar un poco de HTML y jQuery, Imaginemos que tenemos cierto HTML que indica que en nuestra página tenemos varios enlaces locales como se muestra a continuación.

<a href="page2.html#hash1">Contenido 1</a>
<a href="page2.html#hash2">Contenido 2</a>
<a href="page2.html#hash3">Contenido 3</a>

<a name=hash1 /><div class='hash1 hash_content' style='display:none'>Contenido AAA</div>
<a name=hash1 /><div class='hash2 hash_content' style='display:none'>Contenido BBB</div>
<a name=hash1 /><div class='hash3 hash_content' style='display:none'>Contenidmo CCC</div>

Como se puedes apreciar los contenidos están ocultos al cargar la página pero tenemos tres requerimientos.

1. Desplegar contenido basado en el hash de la URL.

Para realizar esta tarea debemos detectar al momento de cargar nuestra página si la URL tiene algún hash y activar únicamente el div solicitado, usando jQuery lo podemos lograr con el siguiente código.

var tab = window.location.hash.substring(1);

  if(tab != '') {
      var div_inactive = $('div.' + tab);
      div_inactive.show();
    };
  }

Al inicio todos los div están ocultos entonces solo debemos desplegar el solicitado.

2. Desplegar contenido basado en el click de un enlace.

$('a').on('click', function(e){
  var href = $(this).attr('href');
  var tab = href.split('#').pop();

  //Desactivar todo el contenido
  $('div.hash_content').each(function(){
    $(this).hide();
  });

  //Activar el contenido
  var div_inactive = $('div.' + tab);
  div_inactive.show();  
});

Se utiliza el metodo on presente en jQuery 1.9 en versiones anteriores se puede usar el live o el bind.

3. Activar contenido si el usuario cambia en hash en la URL

Cuando la página se carga el usuario tiene la posibilidad en la barra de direcciones cambiar las URL de page_2.html#hash2 a page_2.html#hash3 o page_2.html#hash1 este cambio no recargara la página porque los navegadores detectan que es un enlace local.

Para seguir manteniendo siempre un contenido visible como en los dos casos anterior haremos uso del evento hashchange como se muestra en el siguiente código.

jQuery(window).bind('hashchange', function () {
  //detect hash change
  var tab = window.location.hash.slice(1);
  
  //Desactivar todo el contenido
  $('div.hash_content').each(function(){
    $(this).hide();
  });

  //Activar el contenido
  var div_inactive = $('div.' + tab);
  div_inactive.show(); 
});

Con esto tendrías una experiencia de navegación coherente a nivel de hash para el usuario final.

Espero les haya sido de utilidad.