В настоящий момент выбранный идентификатор вкладки для вкладок jQuery

Я знаю, что могу получить индекс текущей выбранной вкладки, но могу ли я каким-то образом получить идентификатор (эквивалент ui.panel.id, если это было вызвано событием табуляции... но это не так) выбранного в данный момент вкладка? Я бы предпочел не использовать индекс, потому что упорядочение вкладок может измениться. Я предпочитаю не использовать разметки стиля, поскольку они могут измениться в будущих выпусках. Есть ли способ для этого? Если нет, могу ли я каким-либо образом использовать индекс для доступа к нему (возможно, даже при первом доступе к объекту панели)? Любые другие идеи?

Ответ 1

Вы можете использовать :visible псевдоселектор для таргетинга на видимую панель:

$("#tabs .ui-tabs-panel:visible").attr("id");

Стоит отметить, что вы можете извлечь активную вкладку из активировать событие:

$("#tabs").tabs({
    activate: function (event, ui) {
        console.log(ui.newPanel[0].id);
    }
});

Ответ 2

Ответ Джонатана Сампсона больше не работает. Попробуйте...

$("#tabs .ui-tabs-panel:visible").attr("id");

jsFiddle: http://jsfiddle.net/tbEq6/

Ответ 3

Если вы хотите, чтобы id (или фактически href) с выбранной вкладки, вы можете использовать eq() для извлечения объекта jQuery.

Здесь вы можете увидеть пример: http://jsfiddle.net/svierkant/hpU3T/1/

Ответ 4

Как я писал в ответ на этот вопрос, есть несколько способов добиться этого.

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

var $tabs = $('#example').tabs();
var selected = $tabs.tabs('option', 'selected'); // => 0

Однако это непрактично, если вам нужно много сделать с этой вкладкой. Почему они еще не обеспечивают более практическое решение для получения фактического элемента, я не уверен, однако, с помощью jQuery есть простое решение, которое вы можете создать самостоятельно.

В следующем коде я покажу вам, как легко сделать все, что вы хотите, с текущей вкладкой:

var curTab = $('.ui-tabs-panel:not(.ui-tabs-hide)'),
    curTabIndex = curTab.index(),  //  will get you the index number of where it sits
    curTabID = curTab.prop("id"),  //  will give you the id of the tab open if existant
    curTabCls = curTab.attr("class");  //  will give you an array of classes on this tab
        //  etc ....
//    now, if you wanted a little more depth, for instance specific tabs area (if you have multiple tabs on your page) you can do simply add to your selector statement
var curTab = $('#myTabs_1 .ui-tabs-panel:not(.ui-tabs-hide)');
//    then you can make simple calls to that tab and get whatever data or manipulate it how you please
curTab.css("background-color", "#FFF");

Ответ 5

После того, как выбранный JQuery 1.9 устарел

Поэтому используйте

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

Ответ 6

var curTab = $jQuery('#tabs .ui-tabs-panel:not(.ui-tabs-hide)').attr('id');

Ответ 7

Это работает:

$('#divName .ui-tabs-panel[aria-hidden="false"]').prop('id');

Ответ 8

Для jQuery UI >= 1.9 вы можете использовать ui.newPanel.selector:

$('#tabs').on('tabactivate', function(event, ui) {
  console.log(ui.newPanel.selector);
});

Ответ 9

Для версии jQuery ниже 1.9:

 <div class="roundedFloatmenu">
        <ul id="unid">
            <li class="titleHover" id="li_search">Search</li>               
            <li class="titleHover" id="li_notes">Notes</li>
             <li class="titleHover active" id="li_writeback">Writeback</li>         
            <li class="titleHover" id="li_attorney">Attorney</li>
        </ul>
    </div

И вы можете найти активную вкладку, используя:

 jQuery('#unid').find('li.active').attr('id')

Ответ 10

$("#tabs .ui-state-active a").attr("id");