Comment changer les onglets par programme avec jquery-ui 1.9?
NOTE: Publier la réponse car il m'a fallu plus de 4 recherches pour trouver la bonne réponse sur stackoverflow. Il apparaît dans 1.9 que l'API a changé, dans les versions antérieures, vous utilisiez $("#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>
La méthode select
est déconseillée depuis 1.9 , et était supprimée en 1.1 . Utilisez plutôt l'option active
.
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>
La sélection selon l'id est très simple comme Sonjz spécifié ci-dessus ... mais la sélection selon tabId est plus délicate .. Je veux juste la partager au cas où quelqu'un aurait besoin
var index = $('#tabs a[href="#tab_id"]').parent().index();
$("#tabs").tabs("option", "active", index);
Essaye ça
$('#tabs a[href="#tabs-2"]').tab('show')
Ici #tabs-2
signifie l'onglet que vous souhaitez changer.
Merci.