Вкладки jQuery UI Получить текущий выбранный вкладка Индекс

Я знаю, что этот конкретный вопрос был задан до, но я не получаю никаких результатов, используя событие bind() в плагине jQuery UI Tabs. Мне нужен индекс только что выбранной вкладки, чтобы выполнить действие при нажатии на вкладку. Bind() позволяет мне подключиться к событию select, но мой обычный метод получения текущей вкладки не работает. Он возвращает ранее выбранный индекс вкладок, а не новый:

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

Вот код, который я пытаюсь использовать, чтобы получить текущую выбранную вкладку:

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

});

Когда я использую этот код, объект ui возвращается undefined. Из документации это должен быть объект, который я использую, чтобы подключиться к вновь выбранному индексу, используя ui.tab. Я пробовал это на первом вызове tabs(), а также сам по себе. Я здесь что-то не так?

ОТВЕТЫ

Ответ 1

Для JQuery UI версии до 1.9: ui.index из event - это то, что вы хотите.

Для JQuery UI 1.9 или более поздней версии: см. ответ от Джорджио Лупарии ниже.

Ответ 2

Если вам нужно получить индекс вкладки вне контекста события табуляции, используйте это:

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

Обновление: Из версии 1.9 'selected' изменяется на 'active'

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

Ответ 3

UPDATE [ Вс 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 уже проделал всю тяжелую работу, не нужно изобретать колесо!

Просто чтобы развернуть (обновить)

Вопрос был доведен до меня: "Что, если на представлении есть несколько областей вкладок?" Опять же, просто подумайте просто, используйте мою настройку, но используйте идентификатор, чтобы определить, какие вкладки вы хотите получить.

Например, если у вас есть:

$('#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 проделал всю тяжелую работу, не думайте так тяжело.

Ответ 4

Если вы используете JQuery UI версии 1.9.0 или выше, вы можете получить доступ к ui.newTab.index() внутри своей функции и получить то, что вам нужно.

Для более ранних версий используйте ui.index.

Ответ 5

Когда вы пытаетесь получить доступ к объекту ui? ui будет undefined, если вы попытаетесь получить к нему доступ за пределами события привязки. Кроме того, если эта строка

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

запускается в следующем случае:

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

selectedTab будет равен текущей вкладке в этот момент времени ( "предыдущий" ). Это происходит потому, что событие "tabsselect" вызывается до того, как вкладка clicked станет текущей вкладкой. Если вы все еще хотите сделать это таким образом, вместо использования tabsshow будет выбран selectedTab, равный вкладке с щелчком.

Однако это кажется чрезмерно сложным, если вы хотите только индекс. ui.index изнутри события или $( "# TabList" ). tabs(). data ( "selected.tabs" ) вне события должно быть всем, что вам нужно.

Ответ 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');

Ответ 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 ссылки, которое должно совпадать с идентификатором для вашего контейнера табуляции:

jQuery('.ui-tabs-selected a',window.parent.document).attr('href')

Это также должно работать вместо: $tabs.tabs('option', 'selected');

Лучше в том смысле, что вместо того, чтобы просто получить индекс вкладки, он дает вам фактический идентификатор вкладки.

Ответ 9

В случае, если вы найдете вкладку Active tab Index, а затем укажите вкладку Active Tab

Сначала получите активный индекс

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

Ответ 10

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

то у вас будет указатель вкладки от 0

простой

Ответ 11

Самый простой способ сделать это -

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

и для индекса

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

Ответ 12

Попробуйте следующее:

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

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

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

Ответ 13

Я нашел код ниже, трюк. Устанавливает переменную только что выбранного индекса вкладки

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

Ответ 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

возьмите скрытую переменную типа '<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" на опубликованной странице.:), просто!!!

Ответ 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/