web-dev-qa-db-ja.com

jquery-ui 1.9でプログラムでタブを変更するにはどうすればよいですか？

Jquery-ui 1.9を使用してプログラムでタブを変更するにはどうすればよいですか？

注： stackoverflowで正しい答えを見つけるのに4回以上の検索が必要だったため、答えを投稿しました。 1.9ではAPIが変更されたようですが、以前のバージョンでは$("#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>
javascriptjqueryjquery-uitabs
18
sonjz

selectメソッドは 1.9から非推奨 で、 1.10で削除 でした。代わりにactiveオプションを使用してください。

例（ jsfiddle も提供）：

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

Sonjz 上で指定したように、idによる選択は非常に単純です...しかし、tabIdによる選択は難しいです..

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

これを試して

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

ここに #tabs-2は、切り替えるタブを意味します。

ありがとう。

5
Amol Udage