Jquery UI选项卡。 如何select一个基于它的ID而不是基于索引的选项卡
嗨，我有两个选项卡，并configuration了使用JQuery UI。
ul class="tabs" li tabone li tabtwo ul dynamic从后面的C＃代码我将隐藏或select一些选项卡让说tabtwo和另一个选项卡必须隐藏或不显示。 我可以在Java脚本中使用.tabs({selected:1});来做到这一点.tabs({selected:1}); 和.tabs(disable:0). 但我不想使用选项卡索引来这样做。 是否有任何替代select标签基于他们的名字/ ID？
注意：由于对jQuery 1.9和jQuery UI的更改，这个答案不再是正确的。 请参阅下面的@ stankovski的答案。
你需要先find标签的索引（这只是它在列表中的位置），然后使用jQuery UI提供的select事件（ tabs-> select ）来专门select标签。
var index = $('#tabs ul').index($('#tabId')); $('#tabs ul').tabs('select', index);
更新：顺便说一句 – 我明白，这是（最终）仍然select索引。 但是，并不要求您知道选项卡的具体位置（尤其是在问题中要求dynamic生成时）。
接受的答案也没有为我工作，但是我find了类似的线程的解决scheme： 切换到select标签的名称在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方法从最近的文档中获取索引或选项卡面板的ID（href散列值）。 该文件指出：
select一个标签，就像点击一样。 第二个参数是要select的选项卡的零基索引或者选项卡所关联的面板的idselect器（选项卡的href片段标识符，例如hash，指向面板的id）。
所以，给定一个布局
<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
上述解决scheme在jQuery UI版本小于1.9。 对于版本1.9+的解决scheme，请参阅@ stankovski的答案 。
活动第一个标签
$（“＃workflowTab”）。tabs（{active：0}）;
活动的最后一个标签
$（“＃workflowTab”）。tabs（{active：-1}）;
活跃的第二个标签
$（“＃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");
如果还有其他的监听器，它可能会有副作用，并且不像通过插件API进行交互那么好 – 但是如果你只是“点击”这个选项卡，而不是计算它的索引和设置它之后活跃起来，这很直观。 如果用户决定重新select该选项，它也不会失败。
$('#tabs').tabs(); $('#tabs a[href="#tabtwo"]').click();
这很吸引人，但是，UI标签代码有一个元函数（ _getIndex ）和注释：
“给用户的元函数提供一个hrefstring而不是一个数字索引”
但在设置活动选项时不使用它，只有在调用enable，disable和load时才使用它。
我发现这个工作比获得索引更容易。 为了我的需要，我select了一个基于URL散列的选项卡
var target = window.location.hash.replace(/#/,'#tab-'); if (target) { jQuery('a[href='+target+']').click().parent().trigger('keydown'); }
我做一个疯狂的假设，你真的有布局如下：
<ul class="tabs"> <li id="tabone">one</li> <li id="tabtwo">two</li> </ul>
如果这个假设是正确的，你只需使用ID来select“标签”
$('#tabone').css("display","none");
编辑：select您的布局选项卡上：
var index = $('.tabs ul').index($('#tabone')); $('.tabs ul').tabs('select', index);
根据UI Doc：
-
首先得到你想激活的标签的索引。
var index = $('#tabs a[href="'+id+'"]').parent().index(); -
激活它
tabs.tabs( "option", "active", 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'); } }
build立在@ stankovski的答案，一个更精确的方法来做这将适用于所有的用例（例如，当一个标签是通过Ajax加载，所以锚的HREF属性不对应的哈希），在任何情况下会对应li元素的“aria-controls”属性。 因此，例如，如果您尝试激活基于location.hash（设置为制表符ID）的选项卡，则最好查找“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散列的情况下：
创build选项卡时，使用“activate”事件将location.hash设置为面板ID：
$('#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和面板ID（通过查找li元素的aria-controls属性来做到这一点）：
$(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。 另外，如果你有嵌套选项卡，处理这一点不是太困难，要么使用更多的逻辑。
$（“＃tabs”）。tabs（{active：[0,2]，disabled：[3]，selected：2}）; Where Selected用于打开特定选项卡或select特定选项卡onload。
