2013-03-08 6 views
15

Come si cambiano le schede in modo programmatico con jquery-ui 1.9?Come cambiare le schede in modo programmatico in jquery-ui 1.9?

NOTA: Inviare la risposta perché sono state necessarie più di 4 ricerche per trovare la risposta corretta su StackOverflow. Appare in 1.9 l'API è cambiata, nelle versioni precedenti, si userebbe $("#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> 

risposta

36

Il metodo select è deprecated since 1.9, ed era removed in 1.10. Utilizzare invece l'opzione active.

Esempio (jsfiddle fornito anche):

<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> 
5

Selezione secondo id è molto semplice, come sopra specificato Sonjz ... ma la selezione in base al tabid è più complicato .. Voglio solo condividere in caso qualcuno ha bisogno di

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

Ho funzionato facendo '$ ('# tabs a [href =" # tab_id "]') [0] .click();' –

1

Prova questa

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

Qui #tabs-2 indica la scheda che si desidera cambiare.

Grazie.