Question

我在尝试使用此功能时遇到了麻烦。我想在页面加载时自动加载标签。我使用了以下代码。

$tabs.tabs('select', 0);

但是，发生的事情是它只选择它而不加载它（该标签通过ajax加载）。有趣的是，当我选择另一个选项卡然后再次返回第一个选项卡时，它会正常加载。

Answer 1

我只是回答这个问题，以避免人们误解弃用函数。

大多数答案在提出问题时都是正确的，但大多数答案都没有在新API中使用。

尝试使用以下代码如果您使用的是新API。

$(function() { 
    $( "#tabs" ).tabs(); 
    $( "#tabs" ).tabs( "option", "active", 2 ); 
});

有关详细信息，请查看以下链接。

http://jqueryui.com/upgrade-guide/1.9/#deprecated-select-method

Answer 2

您是否尝试在初始化时指定所选标签：

var $tabs = $('.selector').tabs({ selected: 0 });

初始化后，您可以通过编程方式选择一个选项卡：

$tabs.tabs('option', 'selected', 0);

编辑：这对我来说非常有用：

var $tabs = jQuery("#tabDiv > ul").tabs( { selected: null } );
$tabs.tabs("select", 0);

Answer 3

之前我遇到过同样的问题。我的解决方案是调用tabs（）两次;一次没有参数;一次使用选择选项：

例如

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

Answer 4

如果没有任何作用，这里有一个小技巧：

您可以使用从jquery添加和删除CSS类，如下所示：

// Firstly, remove the "active" class from div panel and <li> tag
$('#firstTab, #firstTabDiv').removeClass('active');
Also, remove the "in" class from div tag in which your panel resides
$('#firstTabDiv').removeClass('in');

Then add same class which you removed in the div and panel in which you want 
to get automatically select
$("#thirdTab, #thirdTabDiv").addClass('active');
$("#thirdTabDiv").addClass('in');

<li id='firstTab' class="active">
    <a href="#firstTabDiv" data-toggle="tab">
        First Tab
    </a>
</li>
<li id='secondTab' class="active">
    <a href="#secondTabDiv" data-toggle="tab">
        Second Tab
    </a>
</li>
<li id='thirdTab' class="active">
    <a href="#thirdTabDiv" data-toggle="tab">
        Third Tab
    </a>
</li>

这样您就可以自动显示标签上载。

Answer 5

不要忘记把它放在$（文件）.ready（function（）{;}）中;构造

我确定这不是你问题的原因，但是确保你的jQuery在设置好处理之前不会触发它是不会有害的。

Answer 6

您应该可以致电：

$tabs.tabs('load', 0);

选择它以加载其数据后。

Answer 7

假设您正在使用Jquery标签页（http://jqueryui.com/tabs/#default）中的演示。您可以通过单击锚点轻松选择选项卡。只需找到基于其标签名称的锚标签，就像这样......

$('a[href=#tabs-1]').click(); //selects the first tab

选择＆amp;以编程方式加载jquery选项卡

7 个答案: