jQuery UI选项卡获取当前选定的选项卡索引
我知道这个具体的问题之前已经被问到了 ，但是我没有得到任何使用jQuery UI Tabs插件上的bind（）事件的结果。 我只需要新select的选项卡的索引来执行单击选项卡时的操作。 绑定（）允许我钩入select事件，但我通常的方法来获取当前选定的选项卡不起作用。 它返回之前select的标签索引，而不是新索引：
var selectedTab = $("#TabList").tabs().data("selected.tabs"); 这是我正在尝试使用获取当前选定的选项卡的代码：
$("#TabList").bind("tabsselect", function(event, ui) { });
当我使用这个代码时，ui对象返回undefined。 从文档中，这应该是我用来钩入新select的索引使用ui.tab的对象。 我已经在初始的tabs（）调用上尝试了这一点，也是在它自己的。 我在这里做错了什么？
对于1.9以前的JQuery UI版本 ：从event ui.index是你想要的。
对于JQuery UI 1.9或更高版本 ：请参阅下面的Giorgio Luparia的答案 。
如果您需要从制表符事件的上下文之外获取制表符索引，请使用以下命令：
function getSelectedTabIndex() { return $("#TabList").tabs('option', 'selected'); }
更新：从版本1.9“select”更改为“活动”
$("#TabList").tabs('option', 'active')
更新 [ Sun 08/26/2012 ]这个答案变得如此受欢迎，我决定把它变成一个完整的博客/教程
请访问我的博客在这里查看最新的简单访问信息来处理jQueryUI中的标签
还包括（在博客也是） jsFiddle
更新！ 请注意：在较新版本的jQueryUI（1.9+）中， ui-tabs-selected已被ui-tabs-active取代。 ！
我知道这个线程是旧的，但我没有看到提到的是如何从“选项卡事件”以外的地方获得“选定的选项卡”（当前下降的面板）。 我有一个简单的方法…
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 ....
PS。 如果使用iframevariables，然后使用.find（'。ui-tabs-panel：not（.ui-tabs-hide）'），那么对于框架中的选定选项卡，您会发现很容易。 请记住，jQuery已经做了所有的努力，没有必要重新发明轮子！
只是为了扩大（更新）
问题提出来了，“如果视图上有多个标签区域呢？ 再次，只要想想简单，使用我的相同的设置，但使用一个ID来确定你想得到的标签。
例如，如果您有：
$('#example-1').tabs(); $('#example-2').tabs();
你想要第二个选项卡的当前面板：
var curTabPanel = $('#example-2 .ui-tabs-panel:not(.ui-tabs-hide)');
如果你想实际的标签，而不是面板（真的很容易，这就是为什么我没有提到它，但我想我现在就要彻底）
// 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做了所有的努力，不要这么认真。
如果您使用的是JQuery UI版本1.9.0或更高版本，则可以在函数中访问ui.newTab.index（），并获取所需内容。
对于早期版本，使用ui.index 。
你什么时候试图访问UI对象？ 如果您尝试在绑定事件之外访问它，ui将是未定义的。 另外，如果这一行
var selectedTab = $("#TabList").tabs().data("selected.tabs");
在这样的事件中跑了：
$("#TabList").bind("tabsselect", function(event, ui) { var selectedTab = $("#TabList").tabs().data("selected.tabs"); });
selectedTab将等于该时间点的当前选项卡（“上一个”）。这是因为在被点击的选项卡变成当前选项卡之前调用了“选项卡select”事件。 如果你仍然想这样做，使用“tabsshow”，而不是导致selectedTab等于点击标签。
但是，如果你想要的只是索引，那似乎过于复杂了。 事件内部的ui.index或事件外部的$（“＃TabList”）。tabs（）。data（“selected.tabs”）应该是你所需要的。
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');
这改变了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()); } });
应该使用。 这对我来说工作得很好;-)
如果有人试图访问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值，该值应与您的tab容器的id相同：
jQuery('.ui-tabs-selected a',window.parent.document).attr('href')
这也应该代替： $tabs.tabs('option', 'selected');
从某种意义上说，更好的做法是不要只是获取标签的索引，而是给出标签的实际ID。
如果您发现活动选项卡索引，然后指向活动选项卡
首先得到主动索引
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 div[aria-hidden='false']");
和索引
$("#tabs div[aria-hidden='false']").index();
$( "#tabs" ).tabs( "option", "active" )
那么你将有从0选项卡的索引
简单
尝试以下操作：
var $tabs = $('#tabs-menu').tabs(); var selected = $tabs.tabs('option', 'selected'); var divAssocAtual = $('#tabs-menu ul li').tabs()[selected].hash;
我发现下面的代码是诀窍。 设置新select的标签索引的variables
$("#tabs").tabs({ activate: function (e, ui) { currentTabIndex =ui.newTab.index().toString(); } });
你可以在你的下一篇文章中回答下面的答案
var selectedTabIndex= $("#tabs").tabs('option', 'active');
另一种获得选定标签索引的方法是：
var index = jQuery('#tabs').data('tabs').options.selected;
$("#tabs").tabs({ load: function(event, ui){ var anchor = ui.tab.find(".ui-tabs-anchor"); var url = anchor.attr('href'); } });
在urlvariables中，您将获得当前选项卡的HREF / URL
采取隐藏的variables，如'<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'的值。 :)，简单！
如果要确保ui.newTab.index()在所有情况下（本地和远程选项卡）均可用，请在激活function中调用它，如文档所述 ：
$("#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()); }, });
