45 votes

Définir l'onglet par défaut dans les onglets de jQuery UI

J'ai un calendrier mensuel avec juste des tableaux HTML de base, avec chaque mois dans un onglet jQuery UI. Comment puis-je changer l'onglet jQuery UI qui est chargé par défaut ? Je veux que les mois restent dans l'ordre dans la navigation, mais que le mois en cours s'affiche au chargement de la page.

0 votes

Pour jQuery 1.9+, consultez la réponse de @redreinard (la plus votée).

86voto

redreinard Points 757

Veuillez noter que cette option a été renommée dans jqueryui 1.9, elle est maintenant appelée "active" (j'espère que cela évitera à quelqu'un d'autre le mal de tête que je viens de subir) :

$('#tabid').tabs({
  active: index
});

ou

$('#tabid').tabs("option", "active", index);

Voir : http://api.jqueryui.com/tabs/#option-active

49voto

Rion Williams Points 22784

Mise à jour

L'API a changé depuis ma réponse initiale et la sortie de jQuery 1.9. L'approche préférée est d'utiliser la méthode active comme mentionné dans réponse de redreinard :

$('selector').tabs({ active: index });

Approche plus ancienne (avant jQuery 1.9)

Selon le documentation sur les onglets JqueryUI vous pouvez le définir en utilisant les options disponibles select comme on le voit dans l'une ou l'autre des approches ci-dessous :

// index will be the index of the tab that you wish to select
$('selector').tabs( "select" , index )
$('selector').tabs({ selected: index });

5 votes

Le deuxième exemple est correct. d'après la documentation : $( ".selector" ).tabs({ selected: 3 });

0 votes

Cela a fonctionné pour moi. jQuery UI - v1.8.21

3 votes

$( ".selector" ).tabs({ active : 1 }) ; cela a fonctionné pour moi : api.jqueryui.com/tabs/#option-active

11voto

Jenka1980 Points 101

Faites attention que dans jQuery UI 1.9, l'option sélectionnée est devenue l'option active.
Documentation sur jQuery UI (onglets)

2voto

Tony Miller Points 6521

Vous voulez l'option choisie des onglets. Notez qu'il y a aussi une option de cookie afin que les personnes qui quittent votre page et y reviennent aient le même onglet ouvert que lorsqu'elles l'ont quittée.

1 votes

Cette page ne semble pas avoir ce que je veux.

0 votes

L'option Cookie est dépréciée, utilisez plutôt LocalStorage : activate : function(event, ui) { localStorage.setItem("accIndex", $(this).tabs("option", "active")) }, active : parseInt(localStorage.getItem("accIndex"))

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X