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

Question

我知道这个具体问题已经之前被问过，但我没有得到任何使用 jQuery UI Tabs 插件上的 bind() 事件得到的结果。

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

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

这是我尝试用来获取当前选择的选项卡的代码：

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

});

当我使用此代码时，ui 对象返回未定义。 从文档来看，这应该是我用来使用 ui.tab 挂钩到新选择的索引的对象。 我已经在初始 tabs() 调用中尝试过此操作，并且也单独尝试过此操作。 我在这里做错了什么吗？

Answer 1

获取所选选项卡索引的另一种方法是：

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

Answer 2

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

在 url 变量中，您将获取当前选项卡的 HREF / URL

Answer 3

采用像 '' 这样的隐藏变量，并在每个选项卡的 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 4

如果您想确保 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/

Answer 5

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

Answer 6

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

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

更新：
从版本 1.9 开始，“已选择”更改为“活动”

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

Answer 7

对于 1.9 之前的 JQuery UI 版本：event 中的 ui.index 就是您想要的。

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

Answer 8

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

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

Answer 9

更新 [_{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。 如果您使用 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)');

并且如果您想要实际选项卡而不是面板（非常简单，这就是为什么我之前没有提到它，但我想我现在会，只是为了彻底）

// 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 10

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 11

你什么时候尝试访问 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 12

这在 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 13

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

最简单的方法是

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

和索引

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

Answer 15

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

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

Answer 16

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

首先获取活动索引，

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/ #操纵

Answer 17

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

选项卡索引

那么你将拥有从 0 开始的简单

Answer 18

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

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

Answer 19

请尝试以下操作：

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

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

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

Answer 20

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

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