JQueryUI 选项卡-如何获得当前选定的选项卡索引

我知道这个具体的问题一直是 asked before，但我没有得到任何结果使用 bind()事件的 jQuery UI Tabs插件。

我只需要新选择的选项卡的 index在选项卡被单击时执行一个操作。bind()允许我连接到 select 事件，但是我通常使用的获取当前选中选项卡的方法不起作用。它返回以前选择的选项卡索引，而不是新的索引:

var selectedTab = $("#TabList").tabs().data("selected.tabs");

Here is the code I am attempting to use to get the currently selected tab:

$("#TabList").bind("tabsselect", function(event, ui) {


});

当我使用这段代码时，ui 对象返回 undefined 。在文档中，这应该是我使用 ui.tab 将其挂钩到新选择的索引中的对象。我已经在最初的 tabs()调用中尝试过这种方法，也尝试过它自己的方法。我做错什么了吗？

287293 次浏览
小开
最佳答案

对于1.9 之前的 JQuery UI 版本，您需要从 event中获取 ui.index。

有关 JQuery UI 1.9或更高版本 : 请参阅 Giorgio Luparia 的 回答，如下所示。

小开

何时尝试访问 ui 对象？如果您尝试在 bind 事件之外访问 ui，那么 ui 将是未定义的。 还有，如果这条线

var selectedTab = $("#TabList").tabs().data("selected.tabs");

运行在这样的事件中:

$("#TabList").bind("tabsselect", function(event, ui) {
var selectedTab = $("#TabList").tabs().data("selected.tabs");
});

SelectedTab 将与该时间点的当前选项卡(“前一个”选项卡)相等这是因为在单击的选项卡变成当前选项卡之前调用了“ tabsselect”事件。如果您仍然希望这样做，那么使用“ tabsshow”将导致 selectedTab 等同于单击的选项卡。

However, that seems over-complex if all you want is the index. ui.index from within the event or $("#TabList").tabs().data("selected.tabs") outside of the event should be all that you need.

小开

如果您需要从制表符事件的上下文之外获取制表符索引，请使用以下方法:

function getSelectedTabIndex() {
return $("#TabList").tabs('option', 'selected');
}

更新: 从1.9版本中，“选中”改为“激活”

$("#TabList").tabs('option', 'active')
小开

取一个像 '<input type="hidden" id="sel_tab" name="sel_tab" value="" />'这样的隐藏变量，然后在每个选项卡的 onclick 事件上编写像..。

<li><a href="#tabs-0" onclick="document.getElementById('sel_tab').value=0;" >TAB -1</a></li>
<li><a href="#tabs-1" onclick="document.getElementById('sel_tab').value=1;" >TAB -2</a></li>

你可以在发布的页面上得到‘ sel _ tab’的值。 :) ，很简单! ! ！

小开

如果有人试图从 iframe 中访问制表符，您可能会注意到这是不可能的。选项卡的 div永远不会被标记为选中，只是隐藏或不隐藏。链接本身是唯一标记为选定的部分。

<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active ui-state-focus"><a href="#tabs-4">Tab 5</a></li>

下面将给出链接的 href值，该值应该与您的制表符容器的 id 相同:

jQuery('.ui-tabs-selected a',window.parent.document).attr('href')

这也可以代替: $tabs.tabs('option', 'selected');

从某种意义上来说，这样做更好，它不仅仅获取选项卡的索引，而且给出了选项卡的实际 id。

小开

获取选定选项卡索引的另一种方法是:

var index = jQuery('#tabs').data('tabs').options.selected;
小开

更新 [ 2012年8月26日星期日]这个答案已经变得如此流行，以至于我决定把它变成一个成熟的博客/教程
请访问 我的博客在这里，查看在 jQueryUI 中使用 标签的最新便捷访问信息
也包括(在博客中也)是一个 JsFiddle

更新! 请注意: 在更新版本的 jQueryUI (1.9 +)中，ui-tabs-selected已经被 ui-tabs-active所取代！

我知道这个线程很老，但是 我没有看到提到的是如何从“ tab 事件”以外的地方获取“选中的 tab”(当前下拉面板)。 我有一个简单的方法..。

var curTab = $('.ui-tabs-panel:not(.ui-tabs-hide)');

为了容易得到索引，当然有在网站上列出的方式..。

var $tabs = $('#example').tabs();
var selected = $tabs.tabs('option', 'selected'); // => 0

但是，您可以使用我的第一个方法来获得索引和关于该面板的任何您想要的东西非常简单..。

var curTab = $('.ui-tabs-panel:not(.ui-tabs-hide)'),
curTabIndex = curTab.index(),
curTabID = curTab.prop("id"),
curTabCls = curTab.attr("class");
//  etc ....

附言。如果你使用一个 iframe 变量。发现(’。Ui-tab-panel: not (.Ui-tab-hide)’) ，您会发现对于框架中选定的选项卡也很容易做到这一点。 记住，jQuery 已经完成了所有的艰苦工作，不需要重新发明轮子！

只是扩展(更新)

有人向我提出了一个问题: “如果视图中有多个选项卡区域，该怎么办?” 同样，只要想简单，使用我相同的设置，但使用一个 ID 来确定哪些选项卡您想要获得。

例如:

$('#example-1').tabs();
$('#example-2').tabs();

你想要第二个选项卡的当前面板:

var curTabPanel = $('#example-2 .ui-tabs-panel:not(.ui-tabs-hide)');

And if you want the ACTUAL tab and not the panel (really easy, which is why I ddn't mention it before but I suppose I will now, just to be thorough)

// for page with only one set of tabs
var curTab = $('.ui-tabs-selected'); // '.ui-tabs-active' in jQuery 1.9+


// for page with multiple sets of tabs
var curTab2 = $('#example-2 .ui-tabs-selected'); // '.ui-tabs-active' in jQuery 1.9+

再说一次，记住，jQuery 做了所有的艰苦工作，不要想得那么辛苦。

小开

试试以下方法:

var $tabs = $('#tabs-menu').tabs();


var selected = $tabs.tabs('option', 'selected');


var divAssocAtual = $('#tabs-menu ul li').tabs()[selected].hash;
小开

如果您使用的是 JQueryUI 版本1.9.0或更高版本，那么您可以访问函数内部的 Ui.newTab.index ()并获得所需的内容。

For earlier versions use Ui.index.

小开

1.9版本改变了这一点

比如

 $(document).ready(function () {
$('#tabs').tabs({
activate: function (event, ui) {
var act = $("#tabs").tabs("option", "active");
$("#<%= hidLastTab.ClientID %>").val(act);
//console.log($(ui.newTab));
//console.log($(ui.oldTab));
}
});


if ($("#<%= hidLastTab.ClientID %>").val() != "")
{
$("#tabs").tabs("option", "active", $("#<%= hidLastTab.ClientID %>").val());
}




});

应该使用。这对我来说很好; -)

小开 
var $tabs = $('#tabs-menu').tabs();
// jquery ui 1.8
var selected = $tabs.tabs('option', 'selected');
// jquery ui 1.9+
var active = $tabs.tabs('option', 'active');
小开 
$( "#tabs" ).tabs( "option", "active" )

然后您将得到从0开始的 tab 的索引

很简单

小开

最简单的方法是

$("#tabs div[aria-hidden='false']");

还有索引

$("#tabs div[aria-hidden='false']").index();
小开 
$("#tabs").tabs({
load:  function(event, ui){
var anchor = ui.tab.find(".ui-tabs-anchor");
var url = anchor.attr('href');
}
});

在 网址变量中，您将获得当前选项卡的 HREF/URL

小开

如果您找到活动标签索引，然后指向活动标签

首先获取活动索引

var activeIndex = $("#panel").tabs('option', 'active');

然后使用 css 类获取选项卡内容面板

// this will return the html element
var element=   $("#panel").find( ".ui-tabs-panel" )[activeIndex];

现在将其包装在 jQuery 对象中以便进一步使用

 var tabContent$ = $(element);

在这里，我想添加两个信息的类 .ui-tabs-nav是导航相关的和 .ui-tabs-panel是相关的制表符内容面板。在 jquery ui 网站的这个链接演示中，你会看到这个类被使用-http://jqueryui.com/tabs/#manipulation

小开

我发现下面的代码可以做到这一点。设置新选择的选项卡索引的一个变量

$("#tabs").tabs({
activate: function (e, ui) {
currentTabIndex =ui.newTab.index().toString();
}
});
小开

如果您想确保 ui.newTab.index()在所有情况下(本地和远程选项卡)都可用，那么在 activate函数中调用它，如 文件所示:

$("#tabs").tabs({
activate: function(event, ui){
alert(ui.newTab.index());
// You can also use this to set another tab, see fiddle...
// $("#other-tabs").tabs("option", "active", ui.newTab.index());
},
});

Http://jsfiddle.net/7v7n0v3j/

小开

你可以在下一篇文章中回答下面的问题

var selectedTabIndex= $("#tabs").tabs('option', 'active');
小开 
$("#tabs").tabs({
activate: function(event, ui) {
new_index = ui.newTab.index()+1;
//do anything
}
});
小开

你可以通过以下途径找到:

$(yourEl).tabs({
activate: function(event, ui) {
console.log(ui.newPanel.index());
}
});

提交答案