it-swarm.com.ru

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

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

_ul  class="tabs"
  li  tabone
  li tabtwo
ul
_

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

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

45
user695663

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

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

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

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

19
JasCav

Принятый ответ также не работал для меня, однако я нашел решение в аналогичной теме: Переключиться на выбранную вкладку по имени во вкладках 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);
129
stankovski

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

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

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

<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 UI менее 1.9. Для решения в версиях 1.9+ см. @ Stankovski's ответ .

15
Garett

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

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

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

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

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

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

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

2
Sarbasish Mishra

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

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

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

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

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

2
Torin Finnemann

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

$('#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');

Это прекрасно работает.

1
Elisabeth
                <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");
1
Tranvanlam085

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

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

Это ответ

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

Основываясь на ответе @ stankovski, более точном способе сделать это, который будет работать для всех случаев использования (например, когда вкладка загружается через ajax и атрибут href якоря не соответствует хешу), идентификатор в любом case будет соответствовать атрибуту "aria-controls" элемента li. Так, например, если вы пытаетесь активировать вкладку на основе 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:

При создании вкладок используйте событие "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
JohnRDOrazio

Согласно UI Doc:

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

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

    tabs.tabs( "option", "active", index );
    
1
Mohan Dere

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

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');
   }
}
0
Developer

$ ("# tabs"). tabs ({active: [0,2], отключено: [3], выбрано: 2}); Где выбрано используется для открытия конкретной вкладки или выбора конкретной вкладки при загрузке.

0
Durgesh.M

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

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

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

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

Правка: выберите вкладку на вашем макете:

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