如何在 jquery-ui 1.9 中以编程方式更改选项卡? [英] How to change tabs programmatically in jquery-ui 1.9?

问题描述

如何使用 jquery-ui 1.9 以编程方式更改选项卡?

注意: 发布答案是因为我花了超过 4 次搜索才在 stackoverflow 上找到正确答案.它出现在 1.9 API 已更改，在早期版本中，您将使用 $("#tabs").tabs("select", 2).

<div id="标签"><ul><li><a href="#tabs-1">标签 1</a></li><li><a href="#tabs-2">标签 2</a></li><li><a href="#tabs-3">Tab 3</a></li><div id="tabs-1"><p>容器 1</p></div><div id="tabs-2"><p>容器 2</p></div><div id="tabs-3"><p>容器 3</p></div>

解决方案

select 方法是 自 1.9 起已弃用，并且是 在 1.10 中移除.改用 active 选项.

示例(还提供了jsfiddle):

<div id="标签"><ul><li><a href="#tabs-1">标签 1</a></li><li><a href="#tabs-2">标签 2</a></li><li><a href="#tabs-3">Tab 3</a></li><div id="tabs-1"><p>容器 1</p></div><div id="tabs-2"><p>容器 2</p></div><div id="tabs-3"><p>容器 3</p></div>

How do you change tabs programmatically with jquery-ui 1.9?

NOTE: Posting the answer because it took me more than 4 searches to find the right answer on stackoverflow. It appears in 1.9 the API has changed, in earlier versions, you would use $("#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>

解决方案

The select method is deprecated since 1.9, and was removed in 1.10. Use the active option instead.

Example (jsfiddle also provided):

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

这篇关于如何在 jquery-ui 1.9 中以编程方式更改选项卡?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！