以编程方式选择和加载jquery选项卡

我在尝试使用此功能时遇到问题。我想在页面加载时自动加载选项卡。我使用了以下代码

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

---

然而，tab通过ajax加载的只是选择它，而不是加载它。有趣的是，当我选择另一个选项卡，然后再次返回到第一个选项卡时，它将正常加载。

您是否尝试在初始化时指定所选选项卡：

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

初始化后，您可以执行以下操作以编程方式选择选项卡：

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

编辑：这非常适合我：

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

---

别忘了把它放在$document中；构造

---

我确信这不是问题的原因，但在一切都准备好处理之前，确保jQuery不会启动也无妨。

您应该能够调用：

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

---

在您选择它来加载数据之后。

我以前也遇到过同样的问题。我的解决方案是两次调用tabs；一次无参数；使用“选择”选项后：

例如

---

我只是回答这个问题，以避免人们用不推荐的函数来误导

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

如果您正在使用新的API，请尝试以下代码

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

---

假设您正在使用Jquery选项卡页面中的演示。您可以通过单击定位点轻松选择选项卡。只要根据标签名找到锚定标签，就像这样

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

---

如果什么都不管用，这里有一个小技巧：

您可以从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>

---

通过这种方式，您将能够自动显示一个选项卡onload。

只需添加，当我执行以下操作时，第一个选项卡将正常加载$选项卡。选项卡“选择”，1$选项卡。选项卡“选择”，0；但是我真的想用$tabs.tabs'select'，0；有什么想法吗？我想选择一个标签也会加载它。我还是试过了，没有，还是不起作用。只有在选择了任何其他选项卡，然后返回选择第一个选项卡后，似乎才有效。奇怪的我已经尝试了本页上的所有建议，但没有一个有效。可能是因为我有嵌套选项卡。基本上，父选项卡调用一个有更多选项卡的页面，我想选择这个子选项卡页面的第一个选项卡。它不起作用了。只有在选择了另一个标签，然后以编程方式选择第一个标签后，才有效果。只是为了让每个人都清楚。它确实选择了第一个选项卡，但没有加载它应该通过ajaxOk加载的页面。我有一个想法。让我知道这是否有意义。可能是jquery选项卡默认选择第一个选项卡。所以当你通过编程再次尝试选择它时，它不会加载它？@Saumil，我有这个功能，它一定是两种可能性之一。我已经编辑了我的答案。谢谢卡里姆。将所选选项设置为NULL，然后选择第一个选项卡就成功了。到目前为止，它一直运作良好。如果我遇到任何其他问题，我会告诉你的。非常感谢。我使用你的解决方案，但是，它只是打破了我的标签。我将其作为函数$document.readyfunction{$tabs.tabsoption，active，2；}；但它同时显示所有选项卡的内容您的jquery版本是什么？jquery-1.9.1，jquery-ui-1.10.3首先需要初始化选项卡，然后是我的代码。像这样的完整代码$function{$tabs.tabs；$tabs.tabs选项，活动，2；}；如果可以的话，我会给你多张赞成票+一个答案。我可能会创建一个新问题，提供答案，并链接到此处：-

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

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