需要一些建议来使用 JQuery ui 选项卡添加新选项卡！答案

【问题标题】：Need some suggestions to adding new tabs using JQuery ui Tabs!需要一些建议来使用 JQuery ui 选项卡添加新选项卡！
【发布时间】：2011-01-28 06:03:45
【问题描述】：

我将在我的 Web 应用程序上使用 JQuery UI Tabs 插件。

现在我需要一些建议来解决问题。

首先，我想在创建新标签及其内容时选择新添加的标签。例如。当我点击创建新标签时，新标签及其内容应该尽快显示出来。

第二，我需要一个按钮在标签列表[应该是最后一个标签]来创建一个新的空白标签和内容。只需链接 firefox 或 chrome 的标签样式。所以，我可以让用户自己加载新内容。

非常感谢您的任何建议！

[更新] 切换新创建的Tab。有一个插件选项可以做到这一点：

selected:

Zero-based index of the tab to be selected on initialization. To set all tabs to unselected pass -1 as value.

代码示例

Initialize a tabs with the selected option specified.
$( ".selector" ).tabs({ selected: 3 });
Get or set the selected option, after init.
//getter
var selected = $( ".selector" ).tabs( "option", "selected" );
//setter
$( ".selector" ).tabs( "option", "selected", 3 );

【问题讨论】：

标签： jquery user-interface tabs

【解决方案1】：

第一

当你创建一个新选项卡时，将 .ui-tabs-selected 类添加到新创建的选项卡中......你可以使用 $("#idOfNewlyCreatedTab").addClass(".ui-tabs-selected") 并确保从之前当前选择的选项卡中删除这个类......

【讨论】：

谢谢。但是这样我不得不做很多addClass()和removeClass()。我稍后再试试。

【解决方案2】：

或者，您可以使用像“tabCounter”这样的全局变量，它随着标签的添加或删除而递增和递减。

要添加新标签，设置其 URL，然后切换到新添加的标签，您可以这样做：

function addTab(tabTitle, url) {
   // Add the tab
   $tabs.tabs("add", "#tabs-" + tabCounter, tabTitle);

   // Set the url of the new tab
   $tabs.tabs("url", tabCounter, url);

   // Switch to the tab.
   $tabs.tabs("select", tabCounter);

   // Increment the tab counter.
   tabCounter++;
}

【讨论】：