JQuery UI Tabs Causa pantalla para "saltar"

Question

Estoy usando la última versión de jQuery UI tabs. Tengo pestañas posicionadas hacia la parte inferior de la página.

Cada vez que hago clic en una pestaña, la pantalla salta hacia la parte superior.

¿Cómo puedo evitar que esto suceda?

Por favor, vea este ejemplo:

http://5bosses.com/examples/tabs/sample_tabs.html

Answer 1

Si tiene algo en este sentido:

<a href="#" onclick="activateTab('tab1');">Tab 1</a>

Trate de añadir return false; después de la orden de activación pestaña:

<a href="#" onclick="activateTab('tab1'); return false;">Tab 1</a>

Answer 2

Gracias para su ayuda. Buena sugerencia, pero lo intenté antes sin suerte. Creo que JQuery UI puede estar anulando mis esfuerzos.

Este es el código por pestaña:

<li class=""><a href="#fragment-2"><span>Two</span></a></li> 

Ya he intentado esto con ningún éxito:

<li class=""><a href="#fragment-2" onclick="return false;"><span>Two</span></a></li> 

Aquí está un ejemplo sencillo (sin retorno falsa): http://5bosses.com/examples/tabs/sample_tabs.html

Cualquier ¿otras sugerencias?

Answer 3

Supongo que estás animando las transiciones de tus pestañas? Estoy teniendo el mismo problema, donde el desplazamiento de la página vuelve a la cima con cada clic.

me encontré con esto en la fuente de jQuery:

// Show a tab, animation prevents browser scrolling to fragment, 

Efectivamente, si lo he entendido:

$('.tab_container > ul').tabs();  
$('.tab_container > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle', duration: 'fast' } }); 

mi código salta a la cima y es molesto (pero no hay animación). Si cambio eso a esto:

$('.tab_container > ul').tabs();  
//$('.tab_container > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle', duration: 'fast' } }); 

no hay animación de pestañas, pero el cambio entre pestañas es suave.

Encontré una manera de hacerlo retroceder, pero no es una solución adecuada, ya que el navegador aún salta a la parte superior después de hacer clic en una pestaña. El desplazamiento ocurre entre los eventos tabsselect y tabsshow, por lo que el siguiente código salta de nuevo a la pestaña:

var scroll_to_x = 0; 
var scroll_to_y = 0; 
$('.ui-tabs-nav').bind('tabsselect', function(event, ui) { 
    scroll_to_x = window.pageXOffset; 
    scroll_to_y = window.pageYOffset; 
}); 
$('.ui-tabs-nav').bind('tabsshow', function(event, ui) { 
    window.scroll(scroll_to_x, scroll_to_y); 
}); 

Voy a publicar más avances hago.

Answer 4

> var scroll_to_x = 0; var scroll_to_y = 
> 0; 
> $('.ui-tabs-nav').bind('tabsselect', 
> function(event, ui) { 
>  scroll_to_x = window.pageXOffset; 
>  scroll_to_y = window.pageYOffset; }); $('.ui-tabs-nav').bind('tabsshow', 
> function(event, ui) { 
>  window.scroll(scroll_to_x, scroll_to_y); }); 

Gracias por su ayuda! Por favor, hágame saber qué más puede encontrar.

La función anterior funciona (la pantalla no se mueve permanentemente) ... pero la pantalla se tambalea al hacer clic.

Aquí está un ejemplo simple que muestra cómo hacer clic en un pestañas hace que la pantalla para saltar hacia la parte superior (sin el código de arriba): http://5bosses.com/examples/tabs/sample_tabs.html

Tenga en cuenta que no hay animación que se utiliza.

Answer 5

me dieron una solución para esto ...

Cómo detener la pantalla de saltar cuando se hace clic en la pestaña:

Envolver el div que contiene las fichas en un div con una altura fija.

Véase el ejemplo aquí: http://5bosses.com/examples/tabs/sample_tabs.html

Answer 6

Hay una manera mucho más simple que he descubierto a partir de los comentarios de this page que es simplemente eliminar el href = "#" y no va a saltar a la cima más! Lo verifiqué y me funciona. Cheers

Answer 7

Prefiero tener un href = "#" en mis enlaces que no lleve al usuario a ninguna parte, pero puede hacerlo siempre que agregue un onclick = "return false;". La clave, supongo, no es enviar al usuario a "#", que según el navegador parece estar predeterminado como la parte superior de la página actual.

Answer 8

Tuve el mismo problema, más el mío estaban girando por sí mismos, así que si estuviera en la parte inferior de la página, la ventana del navegador se desplazaría hacia arriba. Tener una altura fija para el contenedor de pestañas funcionó para mí. Algo extraño es que si sales de la ventana o pestaña y vuelves, todavía se desplazará. No es el fin del mundo, sin embargo.

Answer 9

Si desea animar a sus transiciones de tabulación (es decir .tabs({ fx: { opacity: 'toggle' } });.), Entonces esto es lo que está pasando:

En la mayoría de los casos, el salto no es causado por el navegador siguiendo el enlace '#'. La página salta porque en el punto medio de la animación entre los dos paneles de pestañas, ambos paneles de pestañas son completamente transparentes y ocultos (como en display: ninguno), por lo que la altura efectiva de toda la sección con pestañas se vuelve momentáneamente cero.

Y si una sección con pestañas de altura cero hace que la página sea más corta, entonces la página parecerá saltar para compensar, cuando en realidad está cambiando de tamaño simplemente para ajustar el contenido (momentáneamente) más corto. ¿Tiene sentido?

La mejor manera de solucionar esto es establecer una altura fija para la sección con pestañas. Si esto no es deseable (debido a que su contenido pestaña varía en altura), a continuación, utilizar esto en su lugar:

jQuery('#tabs').tabs({ 
    fx: { opacity: 'toggle' }, 
    select: function(event, ui) { 
     jQuery(this).css('height', jQuery(this).height()); 
     jQuery(this).css('overflow', 'hidden'); 
    }, 
    show: function(event, ui) { 
     jQuery(this).css('height', 'auto'); 
     jQuery(this).css('overflow', 'visible'); 
    } 
}); 

esta forma se establece la altura calculada del panel antes de la transición pestaña. Una vez que aparece la nueva pestaña, la altura se establece en 'auto'. El desbordamiento está configurado en "oculto" para evitar que el contenido salga del panel al pasar de una pestaña corta a una más alta.

Esto es lo que funcionó para mí. Espero que esto ayude.

Answer 10

reemplazar href = "#" con href = "javascript: void (0);" en el elemento 'a'

funciona al 100%

Answer 11

Sabía usted tryed:

fx: {opacity:'toggle', duration:100} 

Answer 12

solución de Mike demostrado el principio en gran medida, pero tiene un gran inconveniente - si la página resultante es corta, la pantalla saltar a la cima de todos modos! La única solución es recordar scrollTop y restaurarlo después de cambiar las pestañas. Pero antes de la restauración, ampliar la página (etiqueta html) appropriatelly:

(edit - modificado para la nueva API de jQuery UI + pequeña mejora para las grandes páginas)

$(...).tabs({ 
    beforeActivate: function(event, ui) { 
     $(this).data('scrollTop', $(window).scrollTop()); // save scrolltop 
    }, 
    activate: function(event, ui) { 
     if (!$(this).data('scrollTop')) { // there was no scrolltop before 
      jQuery('html').css('height', 'auto'); // reset back to auto... 
        // this may not work on page where originally 
        // the html tag was of a fixed height... 
      return; 
     } 
     //console.log('activate: scrolltop pred = ' + $(this).data('scrollTop') + ', nyni = ' + $(window).scrollTop()); 
     if ($(window).scrollTop() == $(this).data('scrollTop')) // the scrolltop was not moved 
      return;    // nothing to be done 
     // scrolltop moved - we need to fix it 
     var min_height = $(this).data('scrollTop') + $(window).height(); 
      // minimum height the document must have to have that scrollTop 
     if ($('html').outerHeight() < min_height) { // just a test to be sure 
          // but this test should be always true 
      /* be sure to use $('html').height() instead of $(document).height() 
       because the document height is always >= window height! 
       Not what you want. And to handle potential html padding, be sure 
       to use outerHeight instead! 
        Now enlarge the html tag (unfortunatelly cannot set 
       $(document).height()) - we want to set min_height 
       as html's outerHeight: 
      */ 
      $('html').height(min_height - 
       ($('html').outerHeight() - $('html').height())); 
     } 
     $(window).scrollTop($(this).data('scrollTop')); // finally, set it back 
    } 
}); 

Funciona con el efecto fx también.

Answer 13

Intente simplemente agregar un min-height usando css a cada una de las áreas de contenido de pestañas (no las pestañas). Eso lo solucionó para mí. :)

Answer 14

tuve el mismo problema con el menú de jQuery UI - un preventDefault() en el evento click del ancla de las paradas de la página de desplazamiento de nuevo a la parte superior:

$("ul.ui-menu li a").click(function(e) { 
     e.preventDefault(); 
}); 

Answer 15

Intente utilizar event.preventDefault();. En el evento click que está cambiando las pestañas. Mi función se ve así:

$(function() { 
     var $tabs = $('#measureTabs').tabs(); 
     $(".btn-contiue").click(function (event) { 
      event.preventDefault(); 
      $("#measureTabs").tabs("option", "active", $("#measureTabs").tabs ('option', 'active')+1 ); 
     }); 
    }); 

Answer 16

Tuve un problema. Mi código era:

$("#tabs").tabs({ 
    hide: { 
    effect: "fade", 
    duration: "500" 
    }, 
    show: { 
    effect: "fade", 
    duration: "500" 
    } 
}); 

simplemente he quitado show y funcionó como un encanto!

$("#tabs").tabs({ 
     hide: { 
     effect: "fade", 
     duration: "500" 
     } 
}); 

Answer 17

que encontré en mi caso la pestaña href=#example1 estaba causando la página para saltar a la posición de la id. La adición de una altura fija a las pestañas no hizo ninguna diferencia por lo que me acaba de agregar:

$('.nav-tabs li a').click(function(e) { e.preventDefault(); });