jQuery Tabs y registro en el historial

10/May/2010 269

Es muy común el uso de navegación de tipo tabs para contenidos dentro de una misma página y funcionan bastante bien; el usuario ya está acostumbrado a este tipo de elementos y los utiliza sin problemas, además que resulta liviano y relativamente fácil implementarlos.

Pero recientemente un cliente pidió que los tabs se pudieran navegar con el historial del browser, o sea que si vas seleccionado diferentes tabs e incluso saliendo a otras páginas, puedas volver a ellas con el botón ‘Back’ o ‘Volver’ del navegador, y volver a pasar por ellos. Esto me resultó en un problema no menor que me costó solucionar, ya que los tabs suelen reaccionar ante eventos del click del mouse (como por ejemplo para mostrar tal <div> al clickear tal enlace <a> y que a éste se le agregue una class="selected" que indique su estado de seleccionado). Y esto suelo no quedar registrado en el caché del browser para que pueda ser navegado como se pidió. Pero bueno, pude solucionarlo y aquí lo comparto por si lo necesitan; implica 2 pasos diferentes los cuales deben funcionar en conjunto:

Primero, crearemos una simple función en jQuery para que funcionen los tabs. Esta es una de las maneras más simples de crear este tipo de menúes. Para el HTML:

<div class="tabs"><!-- .tabs -->
   <ul id="menu_tabs">
      <li><a href="#item1">Item 1</a></li>
      ...
   </ul>
   <div id="item1" class="caja"><!-- #item1 -->
      <h2>Item 1</h2>
      <p>Donec gravida posuere arcu.</p>
   </div><!-- /#item1 -->
   ...
</div><!-- /.tabs -->

Le aplicamos la siguiente instrucción en jQuery:

$(function(){
   // definimos variables para el contenedor y los<div>'s de los tabs
   var tabContainers = $('.tabs > div');
   // creamos el evento click para cada uno de los items del menu de tabs
   $('div.tabs ul a').each(function() {
      $(this).click(function(){
         // guardamos el ancla (#item1 por ej.) en una variable del link clickeado
         var hash = $(this).attr('href');
         // escondemos todos los tabs
         tabContainers.hide();
         // mostramos el <div> que sea igual al ancla guardado
         $(hash).show();
         // jugamos agregando y quitando classes del menu
         $('div.tabs ul a').removeClass('selected');
         $('a[href='+hash+']').addClass('selected');
      });
   });
   // para comenzar, hacemos que el primer elemento sea el clickeado
   $('div.tabs ul a:first').click();
});

Ver demo tabs

CSSLab: btn back

Bien, con esto tienes tu menú de tabs funcionando de manera básica pero práctica. Ahora como notarás, al ir por los tabs y volver con el botón del navegador éstos no seguirán el mismo recorrido devuelta, aunque en la URL sí se vea que van cambiando. Para que esto ocurra, debemos comparar no el hash del enlace (<a href="#item1"> por ej.), sino comparar con la URL que va cambiando. Además se debe incluir el plugin jQuery BBQ, el que realiza el ingreso de la URL con tabs al caché del browser. Con el mismo HTML, miren la nueva función:

$(function(){
   var tabContainers = $('.tabs > div');
   // creamos un nuevo evento y lo incluimos al browser
   $(window).bind('hashchange', function () {
      // nuestra variable no la sacamos del <a> sino de la URL y dejamos el primero seleccionado
      var hash = window.location.hash || '#item1';
      // el resto es prácticamente lo mismo
      tabContainers.hide();
      $(hash).show();
      $('div.tabs ul a').removeClass('selected');
      $('a[href='+hash+']').addClass('selected');
   });
   // ejecutamos este nuevo evento 'hashchange' mediante un trigger
   $(window).trigger('hashchange');
});

Ver demo Tabs + History

En este ejemplo, incluso podemos abrir mediante la URL en el tab que queramos, por ejemplo con el siguiente link abriremos el demo en el tab 3:

Ver demo Tabs + History en el tercer tab

Comentarios

  1. lorenzobkszh.bloguetechno.com [#]

    Hi, I do think this is a great blog. I stumbledupon it
    😉 I am going to return once again since I saved as a favorite
    it. Money and freedom is the best way to change,
    may you be rich and continue to guide other people.

  2. Filomena [#]

    Asking questions are genuinely pleasant thing if you
    are not understanding anything entirely, but this post presents nice understanding yet.

  3. dhwicmuoaxu [#]

    D2J4Qr aqcdgjqcxgfr, [url=http://efkmkbeoigin.com/]efkmkbeoigin[/url], [link=http://emkzdsyyqtxg.com/]emkzdsyyqtxg[/link], http://nlisxajurljc.com/

  4. prednisolonetablets [#]

    what is a high dose of prednisone prednisone for sale

  5. provigildrug [#]

    https://modafinilprovigilok.com/ provigil generic

  6. ivermectin australia [#]

    General Information Here this offshoot
    https://ivermectinst.com ivermectin 12 mg
    https://ivermectinstrom.com is ivermectin a prescription drug
    https://ivermectstromect.com stromectol manufacturer
    https://ivermectinst.com ivermectina efectos secundarios
    https://ivermectstromect.com ivermectin uk

  7. zyrtec dosing [#]

    coupon for zyrtec allergy medicine – https://allergyd.com

  8. modalert200 [#]

    modafinil smart drug provigil over the counter

  9. bactrim dosing [#]

    trimethoprim cream trimethoprim mechanism of action

  10. side effects of cetirizine hcl [#]

    periactin – http://allergyd.com

  11. cvs zyrtec price [#]

    zyrtec side effects and warnings – https://allergyd.com

  12. cryptocurrency [#]

    Great post. I will be dealing with a few of these issues as well..

  13. holiday dress [#]

    I got this website from my buddy who told me on the topic of this web
    site and at the moment this time I am visiting this web site and reading very informative content at this place.

  14. Pamela [#]

    Thank you for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks
    once again.

  15. ivermectin tablets dosage [#]

    ivermectin http://stromectolforte.com/# ivermectin australia buy stromectol over the counter

  16. Clothing [#]

    Howdy! I could have sworn I’ve visited this website before but after looking at some of the articles I realized
    it’s new to me. Anyhow, I’m certainly pleased I found it and I’ll be bookmarking it and
    checking back often!

  17. ivermectin india [#]

    mua stromectol https://stromectolforte.com/# ivermectin dosage ivermectin for sale

  18. stromectol for sale [#]

    ivermectin for humans https://stromectolforte.com/ canine ivermectin for sale buy 3 mg ivermectin tablets

  19. ivermectin for sale [#]

    Global Low-down Far this product
    https://ivermectinsts.com stromectol
    https://stromectolivermect.com ivermectin 3 mg
    https://ivermectinstrom.com ivermectin for humans for sale
    https://ivermectstromect.com ivermectin for sale
    https://ivermectstromect.com ivermectin over the counter

CSSLab