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

时间:2012-07-09 10:01:05

标签: jquery jquery-ui jquery-selectors jquery-ui-tabs jquery-tabs

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

例如,如果function tabs_a创建了4个标签,而function tabs_b创建了另外4个标签,则tabs_a中的第一个标签会显示为默认标签或{{1}中的第一个标签1}}显示为默认值。

如果两个功能完成加载/创建标签后,如何选择自动显示/选择特定标签?

例如,如果函数tabs_b创建:

tabs_a

和tabs_b创建:

tab_a_1
tab_a_2
tab_a_3
tab_a_4

目前,tab_b_1 tab_b_2 tab_b_3 tab_b_4 tab_a_1默认会被选中,而且这两个中的哪一个最终会被默认选中。

我如何在默认情况下强制选择tab_b_1

3 个答案:

答案 0 :(得分:3)

创建标签后,您可以强制调用以下

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

此处,#tabs是您调用.tabs()函数的div的ID。

答案 1 :(得分:1)

请注意,v1.9中的jQuery UI已删除了'select'方法。要完成您要执行的操作,只需使用“active”选项设置活动选项卡:

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

OR

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

答案 2 :(得分:0)

创建标签后。

//强制选择标签
$("#tab_b")。标签("选择"," 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>