jQuery UI 標簽 - 如何獲取當前選擇的標簽索引

Question

我知道之前已經問過這個特定問題，但是我沒有在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()調用中嘗試過這個，也嘗試過它自己。 我在這里做錯了嗎？

Answer 1

如果您需要從選項卡事件的上下文之外獲取選項卡索引，請使用以下命令：

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

更新：從版本 1.9 'selected' 更改為 'active'

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

Answer 2

對於 1.9 之前的 JQuery UI 版本： event ui.index是您想要的。

對於 JQuery UI 1.9 或更高版本：請參閱下面 Giorgio Luparia 的回答。

Answer 3

更新[ _{Sun 08/26/2012} ] 這個答案變得如此流行以至於我決定把它變成一個完整的博客/教程
請訪問我的博客在這里查看最新的關於在 jQueryUI 中使用選項卡的輕松訪問信息
還包括（也在博客中）是一個jsFiddle

---

更新！ 請注意：在較新版本的 jQueryUI (1.9+) 中， ui-tabs-selected已替換為ui-tabs-active 。 ！！！

---

something I didn't see mentioned was how to get the "selected tab" (Currently dropped down panel) from somewhere other than the "tab events".我沒有看到提到的是如何從“選項卡事件”以外的其他地方獲取“選定選項卡”（當前下拉面板）。 我確實有一個簡單的方法...

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 做了所有艱苦的工作，不要想得那么辛苦。

Answer 4

如果您使用 JQuery UI 版本 1.9.0 或更高版本，您可以在您的函數中訪問ui.newTab.index()並獲得您需要的內容。

對於早期版本，請使用ui.index 。

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

Answer 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") 應該是您所需要的。

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

最簡單的方法是

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

和索引

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

Answer 9

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

首先獲取Active索引

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

Answer 10

如果有人試圖從 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 11

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

那么你將擁有從 0 開始的標簽索引

簡單的

Answer 12

我發現下面的代碼可以解決問題。 設置新選擇的標簽索引的變量

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

Answer 13

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

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

Answer 14

請嘗試以下操作：

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

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

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

Answer 15

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

在url變量中，您將獲得當前選項卡的 HREF / URL

Answer 16

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

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

Answer 17

獲取所選標簽索引的另一種方法是：

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

Answer 18

如果您想確保ui.newTab.index()在所有情況下（本地和遠程選項卡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 19

取一個隱藏變量，如'<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' 的值。 ：） ， 簡單的 ！！！

Answer 20

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