Question

我有两个标签并配置了jQuery UI。

ul  class="tabs"
  li  tabone
  li tabtwo
ul

动态地从C＃代码后面隐藏或选择一些标签让我们说tabtwo 另一个标签必须隐藏或不显示。我可以使用.tabs({selected:1});和.tabs(disable:0).在JavaScript中执行此操作，但我不想使用制表符索引来执行此操作。

是否有根据名称/ ID选择标签的替代方案？

Answer 1

接受的答案对我来说也不起作用，但我在类似的线程中找到了解决方案： Switch to selected tab by name in Jquery-UI Tabs

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

使用jQuery UI＆gt; = 1.9：

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

Answer 2

注意：由于对jQuery 1.9和jQuery UI所做的更改，此答案不再是正确答案。请参阅下面的@ stankovski的答案。

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

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

更新： BTW - 我确实意识到这（最终）仍在按索引进行选择。但是，它并不要求您知道选项卡的具体位置（特别是当它们按照问题中的要求动态生成时）。

Answer 3

从最新的文档中，select方法获取选项卡面板的索引或id（href哈希值）。文档说明：

选择一个标签，就像点击它一样。第二个论点是要选择的选项卡的从零开始的索引或者选项卡与选项卡的关联（选项卡的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');

这是example。

<强>更新

上述解决方案适用于小于1.9的jQuery UI版本。对于版本1.9+的解决方案，请参阅@ stankovski的answer。

Answer 4

如果有其他侦听器，它可能有副作用，并且它不像通过插件API进行交互那样好 - 但是如果你只是“点击”选项卡而不是计算它，它会给出一个不那么冗长的代码索引并在之后将其设置为活动状态，并且它非常直观。如果ui-guys再次重新命名该选项，它也不会失败。

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

有趣的是，ui标签代码有一个带有注释的元函数（_getIndex）：

“元函数，为用户提供提供href字符串的选项数字索引“

但在设置活动选项时不使用它，仅在调用enable，disable和load时使用。

Answer 5

有效的第一个标签

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

有效的最后一个标签

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

活跃的第二个标签

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

它的工作就像一个数组

Answer 6

这些答案都不适合我。我刚刚解决了这个问题。我这样做了：

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

效果很好。

Answer 7

                <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");

Answer 8

根据UI Doc：

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

var index = $('#tabs a[href="'+id+'"]').parent().index();

激活它

tabs.tabs( "option", "active", index );

Answer 9

在@ stankovski的答案的基础上，一个更精确的方法，它将适用于所有用例（例如，当一个标签通过ajax加载，因此锚的href属性与哈希不对应），在任何情况下，id都与li元素的“aria-controls”属性相对应。因此，例如，如果您尝试根据设置为选项卡ID的location.hash激活选项卡，则最好查找“aria-controls”而不是“href”。

使用jQuery UI＆gt; = 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
  }    
});

然后使用window 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。此外，如果您有嵌套选项卡，使用更多逻辑来处理它并不困难。

Answer 10

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

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

Answer 11

这是答案

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

Answer 12

我做了一个疯狂的假设，你真的有布局：

<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);

Answer 13

我这样做了

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

Answer 14

$（“＃tabs”）。tabs（{active：[0,2]，disabled：[3]，selected：2}）; 选择用于打开特定选项卡或选择特定选项卡onload。

jQuery UI选项卡。如何根据不基于索引的id选择选项卡

14 个答案: