[SOLUCIONADO] como evitar tab por defecto

bibliotecario_oscuro · #1 (**permalink**) 03/09/2014, 21:55

saludos amigos tengo el siguiente codigo:

Código Javascript:

Ver original<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div id="tabs">
   <ul>
      <li><a href="#tabs-1">pestaña1</a></li>
      <li><a href="#tabs-2">pestaña2</a></li>
      <li><a href="#tabs-3">pestaña3</a></li>
   </ul>
   <div id="tabs-1">
 
   </div>
   <div id="tabs-2">
 
   </div>
   <div id="tabs-3">
 
   </div>
</div>
</body>

todo marcha bien pero por ejemplo, yo selecciono la pestaña 3 y si recargo la pagina me regresa por defecto a la pestaña1 y yo no quiero que suseda eso si no que se quede en la pestaña que yo seleccione aun que recargue la pagina. He mirado la documentacion del jquery ui pero no me queda claro. ¿pudieran orientarme?

Alexis88 · #2 (**permalink**) 04/09/2014, 00:10

Cuando selecciones una pestaña, se produce el evento activate, dentro del cual puedes especificar una función en la que asignarías a una variable el número de pestaña que has activado, esta variable la almacenarías localmente, ya sea en una cookie o con localStorage. Como al final del valor del atributo href de cada enlace contenido en las pestañas se encuentra el número equivalente al número de pestaña y tomando en cuenta que este widget de jQueryUI cuenta las pestañas desde cero a más, solo te quedaría tomar el número del final del atributo href, restarle uno y almacenarlo localmente. Luego, con el método active, designas el número de pestaña que se mostrará por defecto luego de cargar la página; para lo cual asignarías al dato almacenado localmente o al cero en caso de no haber almacenado dato alguno.

Código Javascript:

Ver original$( "#tabs" ).tabs({
    activate: function(event, ui){
        var href = ui.newTab.context.href;
        localStorage.tab = href[href.length - 1] - 1;
    },
    active: localStorage.tab || 0
});

Si no se almacena dato alguno, como ocurrirá la primera vez, asigno el cero para que por defecto se active la primera pestaña.

Saludos

bibliotecario_oscuro · #3 (**permalink**) 05/09/2014, 19:07

he probado el codigo que me proporcionaste pero, desafortunadamente, no me funicona, ya que al colocarlo, y probar en la pagina me quita los demas codigos jquery de la pagina, he intentado corregirlo y porbarlo con algunas modificaciones pero nada. Investigando un poco, encontre el siguiente codigo el cual, hace exactamente lo que buscaba:

Código Javascript:

Ver original$(function() {
   $( "#tabs" ).tabs();
   $("#tabs ul li a").click(function () {location.hash = $(this).attr("href");});
});

comparto el codigo con los demas compañeres de este foro que, pudiera serles de utilidad. este codigo lo probe con la demo de tabs de jquery ui en su version jquery-ui-1.11.1.custom (custom por que modifique algunos colores y letras en el creador de temas de la pagina). De todas maneras, agradesco el tiempo que te tomaste para colocar el codigo para poder partir de ahi Alexis88 muchas gracias.

Alexis88 · #4 (**permalink**) 05/09/2014, 19:13

Debes de haberlo hecho mal porque lo probé y funciona perfecto: http://jsbin.com/gixiki

Por cierto, eso de "me quita los demas codigos jquery de la pagina" es literalmente IMPOSIBLE.

Saludos