Comment changer les onglets par programmation dans jquery-ui 1.9?

Comment voulez-vous changer les onglets par programmation avec jquery-ui 1.9?

REMARQUE: de Poster la réponse, car il m'a fallu plus de 4 recherches pour trouver la bonne réponse sur stackoverflow. Il apparaît dans de 1,9 l'API a changé, dans les versions antérieures, vous devez utiliser $("#tabs").tabs("select", 2).

<script>
    $(document).ready(function() {
      $("#tabs").tabs();

      //assume you want to change to the 3rd tab after 3 seconds
      setTimeout(function() {
         //???
      }, 3000);
    });
</script>

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a></li>
        <li><a href="#tabs-2">Tab 2</a></li>
        <li><a href="#tabs-3">Tab 3</a></li>
    </ul>

    <div id="tabs-1"><p>Container 1</p></div>
    <div id="tabs-2"><p>Container 2</p></div>
    <div id="tabs-3"><p>Container 3</p></div>
</div>

source d'informationauteur sonjz

  1. 38

    La select méthode est obsolète depuis la 1.9et a été retiré en 1.10. Utiliser le active option à la place.

    Exemple (jsfiddle également fourni):

    <script>
    $(document).ready(function() {
      $("#tabs").tabs();

      //assume you want to change to the 3rd tab after 3 seconds
      setTimeout(function() {
          $("#tabs").tabs("option", "active", 2);
      }, 3000);
    });
</script>

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a></li>
        <li><a href="#tabs-2">Tab 2</a></li>
        <li><a href="#tabs-3">Tab 3</a></li>
    </ul>

    <div id="tabs-1"><p>Container 1</p></div>
    <div id="tabs-2"><p>Container 2</p></div>
    <div id="tabs-3"><p>Container 3</p></div>
</div>
  2. 5

    Sélection en fonction de l'id est très simple comme Sonjz spécifié ci-dessus ... mais la sélection selon tabId est plus compliqué .. j'ai juste envie de le partager dans le cas où les gens ont besoin

    var index = $('#tabs a[href="#tab_id"]').parent().index();
$("#tabs").tabs("option", "active", index);
  3. 1

    Essayer cette

    $('#tabs a[href="#tabs-2"]').tab('show')

    Ici #tabs-2 signifie l'onglet que vous souhaitez passer.

    Grâce.