2009-06-09 15 views
16

Tengo problemas intentando que funcione esta funcionalidad. Me gustaría cargar una pestaña automáticamente cuando se carga la página. He usado el siguiente código.seleccionando y cargando una pestaña jquery programáticamente

$tabs.tabs('select', 0); 

Sin embargo, lo que sucede es que sólo está seleccionándolo y no cargarlo (que las cargas de la ficha a través de AJAX). Curiosamente, cuando selecciono otra pestaña y vuelvo a la primera pestaña, se carga bien.

+0

Solo para agregar, cuando hago lo siguiente, la 1ra pestaña carga bien. $ tabbs.tabs ('select', 1); $ tabbs.tabs ('select', 0); Pero realmente quiero usar $ tabbs.tabs ('select', 0); ¿Alguna idea? –

Respuesta

17

Ha intentado especificar la ficha seleccionada en el momento de la inicialización:

var $tabs = $('.selector').tabs({ selected: 0 }); 

Después de la inicialización, se puede hacer esto para seleccionar programación una pestaña:

$tabs.tabs('option', 'selected', 0); 

EDIT: Esto funciona perfectamente para yo:

var $tabs = jQuery("#tabDiv > ul").tabs({ selected: null }); 
$tabs.tabs("select", 0); 
+0

He intentado todas las sugerencias en esta página y ninguna está funcionando.Podría ser porque he anidado la pestaña. Básicamente, la pestaña principal llama a una página que tiene más pestañas y me gustaría seleccionar la primera pestaña de esta página de pestañas secundarias. No funciona. Solo después de seleccionar otra pestaña y luego seleccionar la 1ª pestaña programaticamente, parece funcionar. –

+0

Solo para que todos estén limpios. Selecciona la primera pestaña, pero no carga la página que se supone que debe cargar a través de ajax –

+0

Ok. Tengo un pensamiento en mente. Avísame si tiene sentido. Podría ser que las pestañas jquery seleccionen la primera pestaña de forma predeterminada. ¿Para que cuando intentes seleccionar programáticamente otra vez, no lo cargue? –

0

No olvide ponerlo dentro de una función $ (document) .ready (() {;}); construir.

Estoy seguro de que esa no es la causa de su problema, pero no hace ningún daño asegurarse de que su jQuery no se encienda hasta que todo esté configurado para manejarlo.

+0

sí está dentro de $ (document) .ready –

0

Usted debe ser capaz de llamar:

$tabs.tabs('load', 0); 

después de seleccionar para cargar sus datos.

+0

Pensé que al seleccionar una pestaña también se carga. –

+0

Lo intenté de todos modos y todavía no funciona. Solo después de seleccionar cualquier otra pestaña y luego regresar para seleccionar la primera pestaña parece funcionar. ¡¡¡Extraño!!! –

2

Tuve el mismo problema antes. La solución que tenía era llamar a las pestañas() dos veces; una vez sin parámetros; una vez con la opción de seleccionar:

Eg.

$("#tabs").tabs(); 
$("#tabs").tabs('select', 2); 
20

Acabo de responder a esta pregunta para evitar que las personas se equivoquen al desaprobar las funciones.

La mayoría de las respuestas eran correctas en el momento de la pregunta, pero la mayoría de ellas no se usaban en la nueva API.

intente seguir el código Si utiliza la API nueva.

$(function() { 
    $("#tabs").tabs(); 
    $("#tabs").tabs("option", "active", 2); 
}); 

Para más información Comprobar siguiente enlace.

http://jqueryui.com/upgrade-guide/1.9/#deprecated-select-method

+0

Utilizo su solución, sin embargo, simplemente me rompe las pestañas. Tengo esto como una función $ (document) ready (function() {$ (" #tabs") .tabs ("opción", "activa", 2); }); pero muestra el contenido de todas las pestañas a la vez – ShadowFlame

+0

¿Cuál es su versión de jquery? –

+0

Esto funcionará con jquery 1.9 o posterior –

0

Suponiendo que estaba utilizando la demo desde la página de pestañas jQuery (http://jqueryui.com/tabs/#default). Puede seleccionar fácilmente la pestaña haciendo clic en el ancla. Simplemente encuentre la etiqueta de anclaje en función de su nombre de pestaña como ...

$('a[href=#tabs-1]').click(); //selects the first tab 
Cuestiones relacionadas