强制选择一个 jQuery-ui-tab 作为默认值

Question

目前，我有 2 个单独的函数，它们在 jquery 选项卡 ui 中创建选项卡。从这两个函数生成的选项卡最终成为默认显示的选项卡似乎有点随机。

例如，如果function tabs_a 创建 4 个选项卡，function tabs_b 创建另外 4 个选项卡，则 tabs_a 的第一个选项卡显示为默认选项卡，或者tabs_b 的第一个选项卡显示为默认选项卡。

如何在两个功能都完成加载/创建选项卡后自动选择显示/选择特定选项卡？

例如，如果函数tabs_a 创建：

tab_a_1
tab_a_2
tab_a_3
tab_a_4

tabs_b 创建：

tab_b_1
tab_b_2
tab_b_3
tab_b_4

目前，tab_a_1 或 tab_b_1 将默认被选中，而这两个中的哪一个最终被默认选中似乎是随机的。

例如，我如何强制 tab_b_3 默认被选中？

Answer 1

标签创建完成后，可以强制调用如下

$("#tabs").tabs('select', "#tab_b_3");

这里，#tabs 是您调用 .tabs() 函数的 div 的 id。

Answer 2

请注意，在 v1.9 中，'select' 方法已从 jQuery UI 中删除。要完成您想要做的事情，只需使用“活动”选项来设置活动选项卡：

$('#tab_b').tabs({ active: true });

或

$('#tab_b').tabs('option', 'active', true);

Answer 3

创建标签后。

//强制选择标签
$("#tab_b").tabs("select", "tab_b_2");

在这里查看 http://jsfiddle.net/75XFM/3/

或者查看下面的代码：

<script type="text/javascript">
$("#tab_a").tabs();
$("#tab_b").tabs();
//force select the tab  
$("#tab_b").tabs("select", "tab_b_2");
</script> 


<div id="tab_a">
    <ul>
        <li><a href="#tab_a_1">TabA1</a>

        </li>
        <li><a href="#tab_a_2">TabA2</a>

        </li>
        <li><a href="#tab_a_3">TabA3</a>

        </li>
    </ul>
    <div id="tab_a_1">I'm Tab A1</div>
    <div id="tab_a_2">I'm Tab A2</div>
    <div id="tab_a_3">I'm Tab A3</div>
</div>
<div id="tab_b">
    <ul>
        <li><a href="#tab_b_1">TabA1</a>

        </li>
        <li><a href="#tab_b_2">TabA2</a>

        </li>
        <li><a href="#tab_b_3">TabA3</a>

        </li>
    </ul>
    <div id="tab_b_1">I'm Tab A1</div>
    <div id="tab_b_2">I'm Tab A2</div>
    <div id="tab_b_3">I'm Tab A3</div>
</div>