jQuery UI选项卡。 如何根据其ID而不是基于索引选择选项卡

我有两个标签,并使用jQuery UI进行配置。

ul  class="tabs"
  li  tabone
  li tabtwo
ul

从C#代码后面动态地隐藏或选择一些选项卡,让我们说tabtwo并且其他标签必须隐藏或不显示。 我可以使用.tabs({selected:1});.tabs(disable:0).在JavaScript中进行此操作,但我不想使用tab索引来这样做。

是否有其他选项卡可以根据名称/ ID选择选项卡?

14个解决方案
130 votes

接受的答案对我也不起作用,但是我在类似的线程中找到了解决方案:在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);
stankovski answered 2020-06-30T06:33:13Z
18 votes

注意:由于对jQuery 1.9和jQuery UI进行了更改,因此此答案不再是正确的答案。 请参阅下面的@stankovski答案。

您需要首先找到选项卡的索引(这只是它在列表中的位置),然后使用jQuery UI提供的select事件(tabs-> select)专门选择选项卡。

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

更新:顺便说一句-我确实意识到(最终)这仍然是按索引选择的。 但是,不需要您知道选项卡的特定位置(尤其是当按问题要求动态生成选项卡时)。

JasCav answered 2020-06-30T06:32:49Z
15 votes

从最新文档中,select方法获取选项卡面板的索引或ID(href哈希值)。 该文档指出:

选择一个选项卡,就像单击它一样。 第二个参数是 要选择的标签或ID选择器的从零开始的索引 标签所关联的面板(标签的href片段标识符, 例如 哈希,指向面板的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');

这是一个例子。

更新

以上解决方案适用于1.9以下的jQuery UI版本。 有关1.9+版中的解决方案,请参见@stankovski的答案。

Garett answered 2020-06-30T06:34:00Z
2 votes

如果还有其他侦听器,它可能会有副作用,并且感觉不像通过插件API进行交互那样好,但是,如果您只是“点击”标签,而不是计算索引和设置的数量,它的代码就不会那么冗长 之后它就活跃起来了,这很直观。 如果ui-guys决定再次重命名该选项,它也不会失败。

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

有趣的是,ui选项卡代码具有带有注释的元函数(_getIndex):

“元函数,使用户可以选择提供href字符串 数值索引”

但在设置active选项时,仅在调用enable,disable和load时才使用它。

Torin Finnemann answered 2020-06-30T06:34:34Z
2 votes

活动的第一个标签

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

活动的最后一个标签

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

活动的第二个标签

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

它的工作就像一个数组

Sarbasish Mishra answered 2020-06-30T06:35:07Z
1 votes

这些答案都不对我有用。 我只是绕过了这个问题。我这样做:

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

效果很好。

Elisabeth answered 2020-06-30T06:35:32Z
1 votes
                <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");
Tranvanlam085 answered 2020-06-30T06:35:47Z
1 votes

根据UI文档:

  1. 首先获取要激活的标签页的索引。

    tabs.tabs( "option", "active", index );
    
  2. 激活它

    tabs.tabs( "option", "active", index );
    
Mohan Dere answered 2020-06-30T06:36:16Z
1 votes

以@stankovski的答案为基础,一种更精确的实现方式将适用于所有用例(例如,当通过ajax加载选项卡,因此anchor的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哈希的情况下:

创建选项卡时,使用'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。 同样,如果您有嵌套的选项卡,则使用更多的逻辑来处理它也不会太困难。

JohnRDOrazio answered 2020-06-30T06:36:59Z
1 votes

我发现这比获取索引更容易。 为了我的需要,我正在根据网址哈希选择一个标签

var target = window.location.hash.replace(/#/,'#tab-');
if (target) { 
    jQuery('a[href='+target+']').click().parent().trigger('keydown');      
}   
David Smyth answered 2020-06-30T06:37:19Z
1 votes

这就是答案

var index = $('#tabs a[href="#simple-tab-2"]').parent().index();
$("#tabs").tabs("option", "active", index);
daniel medina answered 2020-06-30T06:37:39Z
0 votes

我做出一个疯狂的假设,即您确实具有如下布局:

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

如果这个假设是正确的,您只需使用ID选择“标签”

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

编辑:选择布局上的标签:

var index = $('.tabs ul').index($('#tabone')); 
$('.tabs ul').tabs('select', index); 
Mark Schultheiss answered 2020-06-30T06:38:07Z
0 votes

我是这样做的

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');
   }
}
Developer answered 2020-06-30T06:38:27Z
0 votes
$("#tabs").tabs({active: [0,2], disabled: [3], selected: 2});

“选择的位置”用于打开“特殊标签”或在加载时选择“特殊标签”。

Durgesh.M answered 2020-06-30T06:38:47Z
translate from https://stackoverflow.com:/questions/5912762/jquery-ui-tabs-how-to-select-a-tab-based-on-its-id-not-based-on-index