2009-06-09 8 views
16

J'ai des difficultés à essayer cette fonctionnalité. Je voudrais charger un onglet automatiquement quand la page se charge. J'ai utilisé le code suivant.Sélection et chargement d'un onglet jquery par programme

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

Cependant, ce qui se passe est qu'il est seulement la sélection et de ne pas le charger (que les charges de l'onglet via ajax). Fait intéressant lorsque je sélectionne un autre onglet et que je reviens au 1er onglet, il se charge bien.

+0

juste pour ajouter, quand je fais ce qui suit alors la 1ère onglet se charge bien. $ tabs.tabs ('select', 1); $ tabs.tabs ('select', 0); Mais je veux vraiment utiliser $ tabs.tabs ('select', 0); Des idées? –

Répondre

17

Avez-vous essayé spécifier l'onglet sélectionné au moment de l'initialisation:

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

Après l'initialisation, vous pouvez le faire pour sélectionner par programme un onglet:

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

EDIT: Cela fonctionne parfaitement pour me:

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

J'ai essayé toutes les suggestions sur cette page et aucune ne fonctionne.Serait-ce parce que j'ai un onglet imbriqué. Fondamentalement, l'onglet parent appelle une page qui a plus d'onglets et je voudrais sélectionner le premier onglet de cette page onglets enfant. Ça ne fonctionne pas. Seulement après avoir sélectionné un autre onglet, puis en sélectionnant le 1er onglet par voie de programmation semble fonctionner. –

+0

Juste pour que tout le monde soit clair. Il sélectionne le 1er onglet mais ne charge pas la page qu'il est censé charger via ajax –

+0

Ok. J'ai une pensée en tête. Faites-moi savoir si cela a du sens. Se pourrait-il que les onglets jquery choisissent par défaut le 1er onglet. Alors que lorsque vous essayez de le sélectionner à nouveau, il ne le charge pas? –

0

N'oubliez pas de le mettre dans une $ (document) .ready (fonction() {;}); construction.

Je suis sûr que ce n'est pas la cause de votre problème, mais cela ne peut pas nuire à s'assurer que votre jQuery ne se déclenche pas tant que tout n'est pas configuré pour le gérer.

+0

oui c'est dedans $ (document) .ready –

0

Vous devriez pouvoir appeler:

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

après avoir sélectionné pour charger ses données.

+0

Je pensais que sélectionner un onglet le chargeait aussi. –

+0

Je l'ai essayé de toute façon et non ne fonctionne toujours pas. Seulement après avoir sélectionné un autre onglet, puis revenir en arrière pour sélectionner le premier onglet semble fonctionner. Bizarre!!! –

2

J'ai eu le même problème avant. La solution que j'avais consistait à appeler des onglets() deux fois; une fois sans paramètres; une fois avec l'option de sélection:

Par ex.

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

Je viens de répondre à cette question pour éviter que les personnes ne s'égarent avec les fonctions deprecate.

La plupart des réponses étaient correctes au moment de la question, mais la plupart d'entre elles n'étaient pas utilisées dans la nouvelle API.

essayez le code suivant Si vous utilisez une nouvelle API.

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

Pour plus de détails, consultez le lien suivant.

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

+0

J'utilise votre solution, mais elle ne fait que casser mes onglets. J'ai ce en fonction $ (document) .ready (function() {$ (" #tabs") .tabs ("option", "active", 2); }); mais il affiche le contenu de tous les onglets à la fois – ShadowFlame

+0

Quelle est votre version de jquery? –

+0

Cela fonctionnera avec jquery 1.9 ou plus tard –

0

En supposant que vous utilisiez la démo de la page onglets Jquery (http://jqueryui.com/tabs/#default). Vous pouvez facilement sélectionner l'onglet en cliquant sur l'ancre. Il suffit de trouver l'étiquette d'ancrage en fonction de son nom d'onglet comme si ...

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