在 Jquery-UI 选项卡中按名称切换到选定的选项卡答案

【问题标题】：Switch to selected tab by name in Jquery-UI Tabs在 Jquery-UI 选项卡中按名称切换到选定的选项卡
【发布时间】：2010-10-09 08:46:23
【问题描述】：

如果我有三个标签：

<div id="tabs">
    <ul>
        <li><a href="#sample-tab-1"><span>One</span></a></li>
        <li><a href="#sample-tab-2"><span>Two</span></a></li>
        <li><a href="#sample-tab-3"><span>Three</span></a></li>
    </ul>
</div>

我想用它的名字换成#sample-tab-2。我知道如果我知道它的数字，我可以切换到一个标签，但如果我遇到了，我不会知道。

注意事项：JQuery 1.3.1 / JQuery-UI 1.6rc6

【问题讨论】：

所以你想选择标签“三”，不管它在哪里？为什么你知道“三”这个词，但不知道 ID 或数字？如果您曾经翻译过您的网站，这种方法可能会出现问题……您能详细说明这个问题吗？
当然，这里描述了我想要做的事情：stackoverflow.com/questions/572376/… 我现在尝试的方法是更改散列以将字符附加到散列名称，然后在页面加载时选择该选项卡（不带字符）
基本上会将 window.location 设置为#sample-tab-1，然后在页面加载时（ index.php#sample- tab-1) 切换到#_sample-tab-1
根据最新文档$("#tabs").tabs("select", "#sample-tab-1"); 应该可以工作
从 JqueryUI 1.10 开始：$("#tabs").tabs("option", "active", $(tabName + "Selector").index());，有关示例，请参见 jsfiddle.net/vpJC3。

标签： jquery-ui tabs

【解决方案1】：

将特定的标签索引设置为活动：

$(this).tabs({ active: # }); /* Where # is the tab index. The index count starts at 0 */

将最后一个标签设置为活动状态

$(this).tabs({ active: -1 });

通过 ID 设置特定标签：

$(this).tabs({ active: $('a[href="#tab-101"]').parent().index() });

【讨论】：

【解决方案2】：

$('#tabs a[href="#sample-tab-1"]').click();

或者，您可以为链接分配一个 ID

<a href="#sample-tab-1" id="tab1">span>One</span></a>

所以你可以找到它的 id。

$('#tab1').click();

【讨论】：

【解决方案3】：

我无法获得任何答案，因为它们是基于旧版本的 JQuery UI。我们使用的是 1.11.4 (CDN Reference)。

这是我的工作代码：http://jsfiddle.net/6b0p02um/ 我最终将来自四个或五个不同线程的位拼接在一起以使我的工作：

    $("#tabs").tabs(); 

    //selects the tab index of the <li> relative to the div it is contained within
    $(".btn_tab3").click(function () {
        $( "#tabs" ).tabs( "option", "active", 2 );
    });         

    //selects the tab by id of the <li>
    $(".btn_tab3_id").click(function () {
      function selectTab(tabName) {
          $("#tabs").tabs("option", "active", $(tabName + "").index());
      }

      selectTab("#li_ui_id_3");
    });

【讨论】：

【解决方案4】：

试试这个：“选择”/“活动”标签

<article id="gtabs">
    <ul>
        <li><a href="#syscfg" id="tab-sys-cfg" class="tabtext">tab One</a></li>
        <li><a href="#ebsconf" id="tab-ebs-trans" class="tabtext">tab Two</a></li>
        <li><a href="#genconfig" id="tab-general-filter-config" class="tabtext">tab Three</a></li>
    </ul>

var index = $('#gtabs a[href="#general-filter-config"]').parent().index();

// `'select' 在 jquery ui 版本 1.10.0 中不支持

$('#gtabs').tabs('select', index);

替代解决方案：使用“主动”：

$('#gtabs').tabs({ active: index });

【讨论】：

【解决方案5】：

$('#tabs').tabs('select', index);

jquery ui 1.10.0.http://api.jqueryui.com/tabs/ 不支持方法“选择”

我使用这个代码，并且工作正常：

  $('#tabs').tabs({ active: index });

【讨论】：

很好，hamid 提到了 jquery ui 版本。太糟糕了，他们最近更改了 API 并删除了添加选项卡等基本功能（在 1.9 中已弃用，在 1.10 中删除）。我不认为我将能够超越这一点进入他们的哲学思想。就像卖一辆有动力系统但没有座位的汽车。

【解决方案6】：

似乎使用 id 和使用索引一样有效，例如只需这样做即可开箱即用...

$("#tabs").tabs("select", "#sample-tab-1");

这在official docs中有详细记录：

"选择一个标签，就像它被点击一样。第二个参数是要选择的选项卡的从零开始的索引或选项卡关联的面板（选项卡的 href 片段标识符，例如哈希，指向面板的 id)。"

我认为这是在提出这个问题之后添加的，可能是在大多数答案之后

【讨论】：

您的示例应该只是$("#tabs").tabs("select", "#sample-tab-1");，根据newest docs。
@iano 你是对的......文档似乎已经改变......谢谢
@JBCP 看起来不错，但我担心会是这样。为什么他们在没有任何解释的情况下退回到不太方便的 API，我敢肯定他们有某种解释，我想不出任何解释。

【解决方案7】：

只有这段代码真正有效！

$('#tabs').tabs();
$('#tabs').tabs('select', '#sample-tab-2');

【讨论】：

【解决方案8】：

这是一个通过名称获取所选标签的示例代码。我希望这可以帮助您找到 ypur 解决方案：

<html>
<head>
<script type="text/javascript"><!-- Don't forget jquery and jquery ui .js files--></script>
<script type="text/javascript">
   $(document).ready(function(){
     $('#tabs').show();

     // shows the index and tab title selected
     $('#button-id').button().click(function(){
         var selTab = $('#tabs .ui-tabs-selected');
         alert('tab-selected: '+selTab.index()+'-'+ selTab.text());
     });
  });
</script>
</head>
<body>
   <div id="tabs">
      <ul id="tablist">
            <li><a href='forms/form1.html' title="form_1"><span>Form 1</span></a></li>
            <li><a href='forms/form2' title="form_2"><span>Form 2</span></a></li>
      </ul>
   </div>
    <button id="button-id">ClickMe</button>
</body>
</html>

【讨论】：

【解决方案9】：

以下作品对我有用

$($("#tabs")[0]).tabs({selected: 1});

希望，这会有所帮助！

【讨论】：

【解决方案10】：

使用此功能：

function uiTabs(i){
    $("#tabs").tabs("option", "selected", i);
}

并使用以下代码在选项卡之间切换：

<a onclick="uiTabs(0)">Tab 1</a>
<a onclick="uiTabs(1)">Tab 2</a>
<a onclick="uiTabs(2)">Tab 3</a>

【讨论】：

【解决方案11】：

@bduke 的回答实际上只需稍作调整即可。

var index = $("#tabs>div").index($("#simple-tab-2"));
$("#tabs").tabs("select", index);

以上假设类似于：

<div id="tabs">
  <ul>
    <li><a href="#simple-tab-0">Tab 0</a></li>
    <li><a href="#simple-tab-1">Tab 1</a></li>
    <li><a href="#simple-tab-2">Tab 2</a></li>
    <li><a href="#simple-tab-3">Tab 3</a></li>
  </ul>
  <div id="simple-tab-0"></div>
  <div id="simple-tab-1"></div>
  <div id="simple-tab-2"></div>
  <div id="simple-tab-3"></div>
</div>

jQueryUI 现在支持使用选项卡的 ID/HREF 选择器调用“select”，但是在构建选项卡时，“selected”选项仍然只支持数字索引。

我投票给了 bdukes 让我走上正轨。谢谢！

【讨论】：

【解决方案12】：

我无法获得以前的答案。我做了以下操作以按名称获取选项卡的索引：

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

【讨论】：

这个答案不再是“最短”的方法，因为 jQueryUI 自 2010 年以来只是简单地发展。如果你是那些认为选择/最高投票答案是理所当然并且不滚动的人之一对其他人来说，这是一个很好的语法糖，因为：$("#tabs").tabs("select", "#sample-tab-1");
JqueryUI 再次进化，这里是新的解决方案：$("#tabs").tabs("option", "active", $(tabName + "Selector").index());，更多信息请参见这个 jsfiddle：jsfiddle.net/vpJC3
你必须从索引中减去 1。因为数组索引和元素索引相差1。这样写： $("#tabs").tabs().tabs("option", "active", $("#Tab-1").index( ) - 1);
但是这段代码我得到了这个错误....不能在初始化之前调用选项卡上的方法；试图调用方法'select'..你知道@christian
注意：使用目标显示元素索引的解决方案依赖于显示元素与列表元素的顺序相同！

【解决方案13】：

获取选项卡从零开始的索引的唯一实用方法是逐步检查构成选项卡集的每个元素（LI>A）并匹配其内部文本。它可能可以以更清洁的方式完成，但我是这样做的。

$('#tabs ul li a').each(function(i) {
    if (this.text == 'Two') {$('#reqTab').val(i)}
});

$("#tabs").tabs({
    selected: $('#reqTab').val()
});

你可以看到我在页面中使用了一个隐藏的字段来确保变量从一个函数移动到另一个函数。

注意：有一点问题——在选项卡集被激活后选择选项卡似乎不像 jQuery UI 1.8 中所宣传的那样工作，这就是为什么我使用第一次通过时识别的索引来使用选中的所需选项卡初始化选项卡集。

【讨论】：

【解决方案14】：

如果您要更改 href，您可以为链接分配一个 ID <a href="#sample-tab-1" id="tab1"><span>One</span></a>，以便您可以通过它的 ID 找到标签索引。

【讨论】：

【解决方案15】：

您可以使用以下脚本按名称获取选项卡的索引：

var index = $('#tabs ul').index($('#simple-tab-2'));
$('#tabs ul').tabs('select', index);

【讨论】：

这对我不起作用。克里斯蒂安·乔治的回答确实奏效了。你用的是什么版本的jquery？我正在使用 1.4.3。
@Nassign 是的，看起来我的答案不起作用（它试图选择 li，就好像它具有 ID simple-tab-2，而不是将其作为 href）。跨度>
有没有办法在锚定页面时使用此代码更改选项卡？
获取面板 ID 的 index() 的问题是 index() 返回元素相对于父 HTML 元素的索引，因此您可能认为第一个面板返回 0，但在事实上它会返回 1 因为 index() 将解释上面的 UL