Вкладки jQuery UI. Как выбрать вкладку по ее идентификатору, а не по индексу

Ответ 1

Примечание. Из-за изменений, внесенных в jQuery 1.9 и jQuery UI, этот ответ больше не является правильным. Пожалуйста, обратитесь к @stankovski ниже.

Сначала вам нужно сначала указать индекс вкладок (который является его позицией в списке), а затем специально выбрать вкладку с помощью jQuery UI при условии выбора события (tabs- > select).

var index = $('#tabs ul').index($('#tabId'));
$('#tabs ul').tabs('select', index);

Обновление:. Кстати, я понимаю, что это (в конечном счете) выбор по индексу. Но это не требует, чтобы вы знали конкретную позицию вкладок (особенно когда они динамически генерируются, как задано в вопросе).

Ответ 2

Принятый ответ тоже не работал у меня, однако я нашел решение в подобном потоке: Переключиться на выбранную вкладку по имени в вкладках JQuery-UI

var index = $('#tabs a[href="#simple-tab-2"]').parent().index();
$('#tabs').tabs('select', index);

С jQuery UI >= 1.9:

var index = $('#tabs a[href="#simple-tab-2"]').parent().index();
$("#tabs").tabs("option", "active", index);

Ответ 3

Из самого последнего документа метод select принимает индекс или идентификатор панели вкладок (хэш-значение href), В документации указано:

Выберите вкладку, как если бы она была нажата. Второй аргумент - нулевой индекс выбранной вкладки или селектор идентификаторов панель, с которой связана вкладка (идентификатор фрагмента таблицы href, например хэш, указывает на идентификатор панели).

Итак, учитывая макет, например

<div id="myTabs">    
    <ul  class="tabs">
      <li><a href="#tabone">tabone</a></li>
      <li><a href="#tabtwo">tabtwo</a></li>
    </ul>   
</div>

выполняются следующие работы

$('#myTabs').tabs('select', '#tabtwo');

Вот пример.

UPDATE

Вышеупомянутое решение работает в версиях jQuery UI менее 1,9. Для решения в версиях 1.9+ см. @stankovski answer.

Ответ 4

У него могут быть побочные эффекты, если есть другие слушатели, и это не так приятно, как взаимодействовать с API-интерфейсом плагинов, но он дает менее подробный код, если вы просто "click" вкладку, а не считаете ее индекс и установите его активным впоследствии, и это довольно интуитивно понятно, что происходит. Также он не сработает, если ю-ребята решают снова переименовать параметр.

$('#tabs').tabs(); 
$('#tabs a[href="#tabtwo"]').click();

Интересно, что код ui tabs имеет мета-функцию (_getIndex) с комментарием:

", чтобы дать пользователям возможность указывать строку href вместо числового индекса"

но не использует его при настройке активного параметра, только при активации вызова, отключении и загрузке.

Ответ 5

Активная 1-я вкладка

$("#workflowTab").tabs({ active: 0 });

Активная последняя вкладка

$("#workflowTab").tabs({ active: -1 });

Активная 2-я вкладка

$("#workflowTab").tabs({ active: 1 });

Его работа как массив

Ответ 6

Ни один из этих ответов не работал у меня. Я просто пропустил проблему. Я сделал это:

$('#tabs-tab1').removeClass('tabs-hide');
$('#tabs-tab2').addClass('tabs-hide');
$('#container-tabs a[href="#tabs-tab2"]').parent().removeClass('tabs-selected');
$('#container-tabs a[href="#tabs-tab1"]').parent().addClass('tabs-selected');

Он отлично работает.

Ответ 7

                <div id="tabs" style="width: 290px">
                    <ul >
                        <li><a id="myTab1" href="#tabs-1" style="color: Green">Báo cáo chuẩn</a></li>
                        <li><a id="myTab2" href="#tabs-2" style="color: Green">Báo cáo mở rộng</a></li>
                    </ul>
                    <div id="tabs-1" style="overflow-x: auto">
                        <ul class="nav">

                            <li><a href="@Url.Content("~/Report/ReportDate")"><span class=""></span>Báo cáo theo ngày</a></li>

                        </ul>
                    </div>
                    <div id="tabs-2" style="overflow-x: auto; height: 290px">
                        <ul class="nav">

                            <li><a href="@Url.Content("~/Report/PetrolReport#tabs-2")"><span class=""></span>Báo cáo nhiên liệu</a></li>
                        </ul>
                    </div>
                </div>


        var index = $("#tabs div").index($("#tabs-1" ));
        $("#tabs").tabs("select", index);
       $("#tabs-1")[0].classList.remove("ui-tabs-hide");

Ответ 8

В соответствии с UI Doc:

• Сначала получите индекс вкладки, которую вы хотите активировать.

  var index = $('#tabs a[href="'+id+'"]').parent().index();
  

• Активировать его

  tabs.tabs( "option", "active", index );
  

Ответ 9

Основываясь на ответе @stankovski, более точный способ сделать это, который будет работать для всех случаев использования (например, когда вкладка загружается через ajax, и поэтому атрибут href привязки не соответствует хешу), id в любом случае будет соответствовать атрибуту li-атрибута "aria-controls". Например, если вы пытаетесь активировать вкладку на основе location.hash, которая установлена ​​на идентификатор табуляции, тогда лучше искать "aria-controls", чем для "href".

С jQuery UI >= 1.9:

var index = $('#tabs > ul > li[aria-controls="simple-tab-2"]').parent().index();
$("#tabs").tabs("option", "active", index);

В случае установки и проверки хеша URL:

При создании вкладок используйте событие "активировать", чтобы установить location.hash на идентификатор панели:

$('#tabs').tabs({
  activate: function(event, ui) {                   
      var scrollTop = $(window).scrollTop(); // save current scroll position
      window.location.hash = ui.newPanel.attr('id');
      $(window).scrollTop(scrollTop); // keep scroll at current position
  }    
});

Затем используйте событие hashchange окна, чтобы сравнить location.hash с идентификатором панели (сделайте это, ища атрибут aria-controls элемента li):

$(window).on('hashchange', function () {
  if (!location.hash) {
    $('#tabs').tabs('option', 'active', 0);
    return;
  }

  $('#tabs > ul > li').each(function (index, li) {
    if ('#' + $(li).attr('aria-controls') == location.hash) {
      $('#tabs').tabs('option', 'active', index);
      return;
    }
  });


});

Это будет обрабатывать все случаи, даже если вкладки используют ajax. Кроме того, если у вас есть вложенные вкладки, это не так сложно обрабатывать, либо используя немного больше логики.

Ответ 10

Я нашел, что это работает легче, чем получение индекса. Для моих нужд я выбираю вкладку, основанную на хеше url

var target = window.location.hash.replace(/#/,'#tab-');
if (target) { 
    jQuery('a[href='+target+']').click().parent().trigger('keydown');      
}   

Ответ 11

Это ответ

var index = $('#tabs a[href="#simple-tab-2"]').parent().index();
$("#tabs").tabs("option", "active", index);

Ответ 12

Я делаю дикое предположение, что у вас действительно есть макет:

<ul  class="tabs">
  <li id="tabone">one</li>
  <li id="tabtwo">two</li>
</ul>

ЕСЛИ это предположение верно, вы просто используете идентификатор, чтобы выбрать "вкладку"

$('#tabone').css("display","none");

EDIT: выберите вкладку в макете:

var index = $('.tabs ul').index($('#tabone')); 
$('.tabs ul').tabs('select', index); 

Ответ 13

Я сделал это так:

if (document.location.hash != '') {
   //get the index from URL hash
   var tabSelect = document.location.hash.substr(1, document.location.hash.length);
   console.log("tabSelect: " + tabSelect);
   if (tabSelect == 'discount')
   { 
       var index = $('#myTab a[href="#discount"]').parent().index();
       $("#tabs").tabs("option", "active", index);
       $($('#myTab a[href="#discount"]')).tab('show');
   }
}

Ответ 14

$("#tabs").tabs({active: [0,2], disabled: [3], selected: 2});

Где выбрано используется для открытия конкретной вкладки или выбора конкретной вкладки при загрузке.