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

Posted 2023-05-08

技术标签:

【中文标题】jQuery UI 选项卡 - 如何获取当前选定的选项卡索引【英文标题】：jQuery UI Tabs - How to Get Currently Selected Tab Index 【发布时间】：2010-09-22 22:33:26 【问题描述】：

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

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

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

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

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

);

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

【问题讨论】：

【参考方案1】：

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

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

更新：从版本 1.9 'selected' 更改为 'active'

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

【讨论】：

无论如何，这似乎是我所需要的。看起来这实际上给出了默认选项卡，而不是当前选择的选项卡。我错过了什么？ 42票不会错吧？ jqueryui.com/demos/tabs/#option-selected 是的，这个解决方案有帮助。谢谢@Contra 在 jQuery UI 1.9 版中，'selected' 选项已重命名为 'active'（参见 jqueryui.com/changelog/1.9.0）【参考方案2】：

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

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

【讨论】：

非常好的答案！我在网站中包含了您所做的工作的摘要，以便更容易获得答案。干杯，Q 提到的 ui 对象为空，因此 ui.index 目前会失败。我认为答案可能没有那么简单。这是一个完美的答案，感谢您提供的精彩示例！我试图在 1 次内完成所有工作，但没有成功。在我把它分开后，一切都像宣传的那样工作。答案就在那里——使用 ui.index 属性获取 tabselect 事件中的当前索引..... 答案应该更新，因为它不适用于 JQuery UI 1.9.0。您应该根据升级指南 (jqueryui.com/upgrade-guide/1.9/…) 用 ui.newTab.index() 更改 ui.index【参考方案3】：

更新 [_{2012 年 8 月 26 日星期日}] 这个答案已经变得如此受欢迎，以至于我决定把它变成一个成熟的博客/教程请访问My Blog Here 以查看在 jQueryUI 中使用 tabs 的最新轻松访问信息还包括（也在博客中）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 ....

附言。如果您使用 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 做了所有的努力，不要想得那么难。

【讨论】：

太好了，谢谢！如果您愿意，也可以将其作为***.com/q/1864219/11992 的答案提供。这正是我所需要的——谢谢！在 jQuery UI 版本 1.9 中，“selected”选项已重命名为“active”（参见 jqueryui.com/changelog/1.9.0）。【参考方案4】：

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

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

【讨论】：

如果你能用一些额外的细节充实你的答案，那就太好了。【参考方案5】：

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

【讨论】：

【参考方案6】：

您何时尝试访问 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") 应该是您所需要的。

【讨论】：

@Ben ：您的解决方案提供了先前选择的选项卡，因为这是触发 tabsselect 事件时的索引。 @Michael：您阅读了我的答案还是只是获取了代码？在我的回答中，我声明代码不会按原样工作并提供一些替代方案（'tabshow' event; ui.index; $('TabList').tabs().data('selected.tabs')）跨度> ：抱歉我回复晚了。是的， ui.index 工作得很好。我只是想指出 selected.tabs 提供了“上一个”选定选项卡，而不是当前选项卡这一事实。我无意冒犯您的回答。【参考方案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());
            


        );

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

【讨论】：

【参考方案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。

【讨论】：

【参考方案9】：

最简单的方法是

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

对于索引

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

【讨论】：

【参考方案10】：

如果你找到 Active tab Index 然后指向 Active Tab

首先获取Active索引

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

然后使用css类获取tab内容面板

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

【讨论】：

【参考方案11】：

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

那么你将拥有从 0 开始的标签索引

简单

【讨论】：

【参考方案12】：

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

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

【讨论】：

【参考方案13】：

尝试以下方法：

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

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

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

【讨论】：

【参考方案14】：

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

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

【讨论】：

此答案对于查找当前活动选项卡很有用，尤其是当不在选项卡选择事件的上下文中时。【参考方案15】：

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

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

【讨论】：

【参考方案16】：

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

在 url 变量中你会得到当前标签页的 HREF / URL

【讨论】：

【参考方案17】：

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

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

【讨论】：

【参考方案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”的值。 :) ，简单！！！

【讨论】：

我没有投票给你，但是没有理由额外的标记和内联 javascript。特别是因为他已经在使用 jQuery...【参考方案19】：

如果您想确保 ui.newTab.index() 在所有情况下都可用（本地和远程选项卡），请在 activate 函数中调用它，正如 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/

【讨论】：

【参考方案20】：

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

【讨论】：

欢迎来到 Stack Overflow！虽然链接是分享知识的好方法，但如果它们在未来被破坏，它们将无法真正回答问题。将回答问题的链接的基本内容添加到您的答案中。如果内容太复杂或太大而无法在此处放置，请描述所提出解决方案的总体思路。请记住始终保留对原始解决方案网站的链接引用。见：How do I write a good answer?

以上是关于jQuery UI 选项卡 - 如何获取当前选定的选项卡索引的主要内容，如果未能解决你的问题，请参考以下文章

WPF 选项卡控件：如何获取当前选定的选项卡？

获取选项卡式活动的当前选定选项卡

如何使用 jquery 从 asp.net 列表框中仅获取当前选定的选项

Jquery ui如何选择启用的选项卡？

如何在 jquery 中自动回发后维护选定的选项卡？

jQuery UI选项卡 - 如何在悬停上选择选项卡