javascript - not - tabs jquery bootstrap

Las pestañas JQuery UI causan que la pantalla "salte"

Question

Estoy usando la última versión de las pestañas de jQuery UI . 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 mira este ejemplo:

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

Answer 1

¿Has probado?

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

Answer 2

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

Encontré esto en la fuente de jquery:

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

Efectivamente, si tengo esto:

$(''.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 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 hacer que retroceda, pero no es una solución adecuada, ya que el navegador aún salta a la cima después de hacer clic en una pestaña. El desplazamiento ocurre entre las tabs de eventos y tabsshow, por lo que el siguiente código salta a su 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);
});

Publicaré cualquier progreso que haga.

Answer 3

Encontré en mi caso que la pestaña href=#example1 estaba haciendo que la página saltara a la posición de la id . Agregar una altura fija a las pestañas no importó, así que acabo de agregar:

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

Answer 4

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

Aquí está el código por pestaña:

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

Ya probé esto sin éxito:

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

Aquí hay un ejemplo simple (sin retorno falso): http://5bosses.com/examples/tabs/sample_tabs.html

¿Cualquier otra sugerencia?

Answer 5

Hay una manera mucho más simple que descubrí de los comentarios en esta página que es simplemente eliminar el href = "#" ¡y ya no saltará a la cima! Lo verifiqué y me funciona. Aclamaciones

Answer 6

Intenta usar 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 7

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 8

La solución de Mike demostró 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 el scrollTop y restaurarlo después de cambiar las pestañas. Pero antes de la restauración, amplíe la página (etiqueta html) apropiadamente:

(editar - modificado para la nueva API Jquery UI + pequeña mejora para páginas grandes)

$(...).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 9

Me dieron una solución para esto ...

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

Envuelve el div que contiene las pestañas en un div con una altura fija.

Vea el ejemplo aquí: http://5bosses.com/examples/tabs/sample_tabs.html

Answer 10

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 11

Si tienes algo en esta línea:

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

Intenta agregar return false; después del comando de activación de pestañas:

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

Answer 12

Tenía un problema así. Mi código era:

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

¡Simplemente eliminé el show y funcionó como un amuleto!

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

Answer 13

Tuve el mismo problema con el menú de jquery ui: prevenirDefault () en el evento de clic del ancla impide que la página se desplace de nuevo a la parte superior:

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

Answer 14

Tuve el mismo problema, y ​​el mío estaba girando por sí solo, así que si estuvieras 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 15

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

funciona al 100%

Answer 16

Si está animando sus transiciones de pestañas (es decir, .tabs({ fx: { opacity: ''toggle'' } }); ), entonces esto es lo que está sucediendo:

En la mayoría de los casos, el salto no es causado por el navegador que sigue 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 simplemente está redimensionando para ajustarse al contenido (momentáneamente) más corto. ¿Tiene sentido?

La mejor manera de arreglar esto es establecer una altura fija para la sección con pestañas. Si esto no es deseable (porque el contenido de su pestaña varía en altura), use 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'');
}
});

Establecerá la altura calculada del panel antes de la transición de tabulación. 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 17

> 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 tu 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í hay un ejemplo simple que muestra cómo al hacer clic en una pestaña, la pantalla salta hacia la parte superior (sin el código anterior): http://5bosses.com/examples/tabs/sample_tabs.html

Tenga en cuenta que no se está utilizando ninguna animación.