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

Question

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

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

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

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

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

});

当我使用这段代码时， ui 对象返回 undefined. 。从文档来看，这应该是我用来使用 ui.tab 挂钩到新选择的索引的对象。我在最初尝试过这个 tabs() 调用并自行调用。我在这里做错了什么吗？

Answer 1

为便捷的版本之前1.9: ui.index 从 event 是你想要什么。

为便捷1.9或以后:看看 答案 由Giorgio Luparia，下面。

Answer 2

如果你需要得到签索引，从上下文之外的一个标签的事件，使用这样的：

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

更新：从1.9版'的选定'改为'积极'

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

Answer 3

更新 [_{太阳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。如果您使用的一个框架变。找到('.ui-卡-小组：不(.ui-卡-隐藏)'),你会发现它很容易做到这一点的选择标签的框架。记。已经做了所有辛勤的工作，没有必要重新发明轮子！

只是到扩大(新)

问题是我，"如果有多于一个片区域的观点？" 再次，只想简单，用我的相同的设置，但使用标识为其标签，你想要抓住的。

例如，如果有：

$('#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+

再次，记住的。做了所有辛勤工作，不认为如此艰难。

Answer 4

如果你使用的技版1.9.0或以上，你可以访问 用户界面。newTab.指数() 在你的功能和得到你需要什么。

早期版本的使用 用户界面。索引.

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为的点击标签。

然而，这似乎过于复杂，如果所有你想要的是引。用户界面。指数内的事件或美元("#TabList").标签().数据("选择。标签")以外的活动应该是所有你需要的。

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

在情况下，有人试图访问的标签内的一个框架，可能会注意到它不可能的。的 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

在情况下，如果你找到活动的标签索引，然后点活动的标签

第一次得到积极指标

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 与选项内容的面板。在这个链接，演示技网站，你会看到这类使用 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');  
    }  
});  

在里面 网址 变量您将获得当前选项卡的 HREF / URL

Answer 17

采取一个隐藏的变量 '<input type="hidden" id="sel_tab" name="sel_tab" value="" />' 并在每个选项卡击事件的编写代码就像...

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

如果你想确保 ui.newTab.index() 可以在所有情况下(当地和远程的标签)，那么称呼它的 激活 作为 文档 说：

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

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