jquery用户界面选项卡-如何获取当前选定的选项卡索引

对于1.9之前的jquery用户界面版本 : ui.index 从 event 是你想要的。

对于jquery ui 1.9或更高版本 见 answer 下面是乔尔吉奥·卢帕里亚的作品。

如果需要从Tabs事件的上下文外部获取选项卡索引,请使用以下命令:

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

更新: 从版本1.9“已选择”更改为“活动”

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

更新 [ _{太阳08/26/2012} ]这个答案很受欢迎,我决定把它变成一个完整的博客/教程。
请访问 My Blog Here 查看最新的轻松访问信息 制表符 在JQuYYUI中
也包括(在博客中)是 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选项卡面板:不(.ui选项卡隐藏)”,您也会发现为框架中的选定选项卡执行此操作很容易。 记住,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指数 .

您何时尝试访问UI对象?如果您试图在绑定事件之外访问UI,那么它将是未定义的。 另外,如果这条线

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

在这样的事件中运行:

$("#TabList").bind("tabsselect", function(event, ui) {
  var selectedTab = $("#TabList").tabs().data("selected.tabs");
});

SelectedTab将在该时间点等于当前选项卡(“上一个”)。这是因为在单击的选项卡成为当前选项卡之前调用“TabsSelect”事件。如果您仍然想这样做,那么使用“tabshow”将导致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 链接的值,该值应与选项卡容器的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;

我发现下面的代码会起作用。设置新选定选项卡索引的变量

$("#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');  
    }  
});  

在 网址 变量您将获得当前选项卡的href/url

采用隐藏变量 '<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() 在所有情况下都可用(本地和远程选项卡),然后在 激活 函数作为 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/

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