вкладки jQuery UI. Как выбрать вкладку по ее идентификатору, а не по индексу - PullRequest
45 голосов
/ 06 мая 2011

У меня есть две вкладки и настроен пользовательский интерфейс jQuery.

ul  class="tabs"
  li  tabone
  li tabtwo
ul

динамически из кода C # позади, я буду скрывать или выбирать некоторые вкладки, скажем, tabtwo а другая вкладка должна быть скрыта или не показана. Я могу сделать это в JavaScript, используя .tabs({selected:1}); и .tabs(disable:0)., но я не хочу использовать индексы табуляции для этого.

Есть ли альтернатива для выбора вкладок на основе их имени / идентификатора?

Ответы [ 14 ]

129 голосов
/ 27 октября 2011

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

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

С пользовательским интерфейсом jQuery> = 1,9:

var index = $('#tabs a[href="#simple-tab-2"]').parent().index();
$("#tabs").tabs("option", "active", index);
19 голосов
/ 06 мая 2011

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

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

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

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

15 голосов
/ 17 января 2012

Из самого последнего документа метод 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');

Вот пример .

ОБНОВЛЕНИЕ

Приведенное выше решение работает в версиях пользовательского интерфейса jQuery менее 1.9.Для решения в версиях 1.9+ см. @ Stankovski's answer .

2 голосов
/ 11 августа 2015

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

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

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

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

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

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

Работает как массив

2 голосов
/ 21 мая 2013

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

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

Интересно, что код вкладок пользовательского интерфейса имеет мета-функцию (_getIndex) с комментарием:

"мета-функция, позволяющая пользователям вместо этого предоставлять строку href числового индекса "

, но не использует его при установке активной опции, только при вызове enable, disable и load.

1 голос
/ 18 января 2018

Это ответ

var index = $('#tabs a[href="#simple-tab-2"]').parent().index();
$("#tabs").tabs("option", "active", index);
1 голос
/ 20 сентября 2016

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

var target = window.location.hash.replace(/#/,'#tab-');
if (target) { 
    jQuery('a[href='+target+']').click().parent().trigger('keydown');      
}   
1 голос
/ 17 октября 2015

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

С пользовательским интерфейсом jQuery> = 1,9:

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

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

При создании вкладок используйте событие 'activ', чтобы установить для 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. Кроме того, если у вас есть вложенные вкладки, это не так уж сложно обработать, используя немного больше логики.

1 голос
/ 07 июля 2014

Согласно UI Doc:

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

    var index = $('#tabs a[href="'+id+'"]').parent().index();
    
  2. Активировать

    tabs.tabs( "option", "active", index );
    
1 голос
/ 13 декабря 2012
                <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");
...