Question

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

单击选项卡时，我只需要新选择的选项卡的index即可执行操作。 bind()允许我挂钩select事件，但我通常的获取当前选中选项卡的方法不起作用。它返回先前选择的选项卡索引，而不是新选项卡：

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

以下是我尝试用于获取当前所选标签的代码：

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

});

当我使用此代码时，ui对象会返回undefined 。从文档中，这应该是我用来使用ui.tab挂钩到新选择的索引的对象。我已经在最初的tabs()电话会议上尝试了此操作，并且也是自己的。我在这里做错了吗？

Answer 1

如果您需要从tabs事件的上下文之外获取选项卡索引，请使用：

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

更新：从版本1.9“已选择”更改为“有效”

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

Answer 2

对于1.9之前的JQuery UI版本：来自ui.index的{{1}}是你想要的。

对于JQuery UI 1.9或更高版本：请参阅下面的Giorgio Luparia的answer。

Answer 3

更新 [_{Sun 08/26/2012}]这个答案已经变得如此受欢迎，我决定将其变成一个完整的博客/教程
请访问My Blog Here，查看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。如果您使用iframe变量然后.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)');

如果你想要ACTUAL标签而不是面板（非常简单，这就是为什么我之前没有提到它，但我想我现在会这样做，只是为了彻底）

// 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做了所有的努力，不要那么认真。

Answer 4

如果您使用的是JQuery UI 1.9.0或更高版本，则可以在函数中访问 ui.newTab.index（）并获取所需内容。

对于早期版本，请使用 ui.index 。

Answer 5

您何时尝试访问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等于点击的标签。

然而，如果您想要的只是索引，那似乎过于复杂。来自事件内的ui.index或$（“＃TabList”）。事件之外的tabs（）。data（“selected.tabs”）应该是您需要的全部内容。

Answer 6

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');

Answer 7

这改变了版本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());
            }


        });

应该使用

。这对我来说很好; - ）

Answer 8

如果有人试图从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。

Answer 9

最简单的方法是

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

和索引

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

Answer 10

如果您找到“活动”选项卡索引，然后指向“活动选项卡”

首先获取Active index

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

Answer 11

$( "#tabs" ).tabs( "option", "active" )

然后你将得到0的标签索引

简单

Answer 12

尝试以下方法：

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

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

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

Answer 13

我发现下面的代码可以解决问题。设置新选择的选项卡索引的变量

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

Answer 14

您可以在下一篇文章中发布以下答案

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

Answer 15

获取所选标签索引的另一种方法是：

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

Answer 16

$("#tabs").tabs({  
    load:  function(event, ui){  
        var anchor = ui.tab.find(".ui-tabs-anchor");  
        var url = anchor.attr('href');  
    }  
});

在 url 变量中，您将获得当前标签的HREF /网址

Answer 17

您可以通过以下方式找到它：

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

Answer 18

使用隐藏变量'<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'的值。 :)，简单!!!

Answer 19

如果您想确保ui.newTab.index()在所有情况下都可用（本地和远程标签），请在激活功能中调用它，如documentation所示：

$("#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/

Answer 20

$("#tabs").tabs({
    activate: function(event, ui) {
        new_index = ui.newTab.index()+1;
        //do anything
    }
});

jQuery UI选项卡 - 如何获取当前选定的选项卡索引

20 个答案: