У меня есть две вкладки и настроен пользовательский интерфейс jQuery.
ul class="tabs"
li tabone
li tabtwo
ul
динамически из кода С# позади я буду скрывать или выбирать какую-то вкладку, скажем, tabtwo
а другая вкладка должна быть скрыта или не показана. Я могу сделать это в JavaScript, используя .tabs({selected:1}); и .tabs(disable:0)., но я не хочу использовать для этого индексы вкладок.
Есть ли альтернатива для выбора вкладок на основе их имени/идентификатора?
Примечание. Из-за изменений, внесенных в jQuery 1.9 и jQuery UI, этот ответ больше не является правильным. Пожалуйста, обратитесь к @stankovski ниже.
Сначала вам нужно сначала указать индекс вкладок (который является его позицией в списке), а затем специально выбрать вкладку с помощью jQuery UI при условии выбора события (tabs- > select).
var index = $('#tabs ul').index($('#tabId'));
$('#tabs ul').tabs('select', index);
Обновление:. Кстати, я понимаю, что это (в конечном счете) выбор по индексу. Но это не требует, чтобы вы знали конкретную позицию вкладок (особенно когда они динамически генерируются, как задано в вопросе).
Принятый ответ тоже не работал у меня, однако я нашел решение в подобном потоке: Переключиться на выбранную вкладку по имени в вкладках 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);
Из самого последнего документа метод 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.
У него могут быть побочные эффекты, если есть другие слушатели, и это не так приятно, как взаимодействовать с API-интерфейсом плагинов, но он дает менее подробный код, если вы просто "click" вкладку, а не считаете ее индекс и установите его активным впоследствии, и это довольно интуитивно понятно, что происходит. Также он не сработает, если ю-ребята решают снова переименовать параметр.
$('#tabs').tabs();
$('#tabs a[href="#tabtwo"]').click();
Интересно, что код ui tabs имеет мета-функцию (_getIndex) с комментарием:
", чтобы дать пользователям возможность указывать строку href вместо числового индекса"
но не использует его при настройке активного параметра, только при активации вызова, отключении и загрузке.
Активная 1-я вкладка
$("#workflowTab").tabs({ active: 0 });
Активная последняя вкладка
$("#workflowTab").tabs({ active: -1 });
Активная 2-я вкладка
$("#workflowTab").tabs({ active: 1 });
Его работа как массив
Ни один из этих ответов не работал у меня. Я просто пропустил проблему. Я сделал это:
$('#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');
Он отлично работает.
<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");
В соответствии с UI Doc:
Сначала получите индекс вкладки, которую вы хотите активировать.
var index = $('#tabs a[href="'+id+'"]').parent().index();
Активировать его
tabs.tabs( "option", "active", index );
Основываясь на ответе @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. Кроме того, если у вас есть вложенные вкладки, это не так сложно обрабатывать, либо используя немного больше логики.
Я нашел, что это работает легче, чем получение индекса. Для моих нужд я выбираю вкладку, основанную на хеше url
var target = window.location.hash.replace(/#/,'#tab-');
if (target) {
jQuery('a[href='+target+']').click().parent().trigger('keydown');
}
Это ответ
var index = $('#tabs a[href="#simple-tab-2"]').parent().index();
$("#tabs").tabs("option", "active", index);
Я делаю дикое предположение, что у вас действительно есть макет:
<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);
Я сделал это так:
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');
}
}
$("#tabs").tabs({active: [0,2], disabled: [3], selected: 2});
Где выбрано используется для открытия конкретной вкладки или выбора конкретной вкладки при загрузке.