Jak zmienić zakładki programowo w jquery-ui 1.9?

Question

Jak zmieniasz zakładki programowo za pomocą jquery-ui 1.9?

UWAGA: Zamieszczanie odpowiedzi, ponieważ zajęło mi więcej niż 4 wyszukiwania, aby znaleźć właściwą odpowiedź na stackoverflow. Wygląda na to, że w 1.9 zmienił się interfejs API, we wcześniejszych wersjach używałbyś $("#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> 

Answer 1

Sposób select jest deprecated since 1.9 i był removed in 1.10. Zamiast tego użyj opcji active.

Przykład (jsfiddle również):

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

Answer 2

Wybór według id jest bardzo prosta jak Sonjz określonym powyżej ... ale wybór według tabetyczny jest trudniejsze .. ja po prostu chcesz podzielić się nim w przypadku innych potrzebuje

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

Answer 3

Spróbuj

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

Tutaj #tabs-2 oznacza kartę, którą chcesz przełączyć.

Dzięki.