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

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

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

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

Answer 1

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

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

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

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

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

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

Answer 2

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

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

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

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

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

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

Answer 3

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

例如。

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

Answer 4

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

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

 // Firstly, remove the "active" class from div panel and 
 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'); 
  First Tab  
 
  Second Tab  
 
  Third Tab   

这样您就可以自动显示选项卡onload。

Answer 5

不要忘记把它放在$（document）.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