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

Question

我知道之前已经问过这个具体问题,但是我没有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来自event你想要的.

对于JQuery UI 1.9或更高版本:请参阅下面的Giorgio Luparia 的答案.

Answer 3

更新 [ _{Sun 08/26/2012} ]这个答案已经变得如此受欢迎,我决定将它变成一个成熟的博客/教程
请访问我的博客在这里查看最新的简单访问信息,以使用jQueryUI中的 选项卡
还包括(在博客中也是)jsFiddle

更新!请注意:在较新版本的jQueryUI(1.9+)中,ui-tabs-selected已被替换为ui-tabs-active.!

我知道这个帖子已经老了,但是我没有看到提到的是如何从"tab events"以外的某个地方获取"selected 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 ....

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

如果有人尝试从 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 8

这改变了版本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 9

最简单的方法是

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

对于索引

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