52

如果我有三个标签：

<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

4

15 回答 15

87

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

var index = $('#tabs a[href="#simple-tab-2"]').parent().index();
$('#tabs').tabs('select', index);
于 2011-01-10T11:04:01.277 回答
34

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

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

这在官方文档中有很好的记录：

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

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

于 2012-04-08T16:17:38.107 回答
26 
$('#tabs').tabs('select', index);

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

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

  $('#tabs').tabs({ active: index });
于 2013-02-14T16:42:49.070 回答
12

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

var index = $('#tabs ul').index($('#simple-tab-2'));
$('#tabs ul').tabs('select', index);
于 2009-02-23T16:52:49.177 回答
6

只有这段代码真正有效！

$('#tabs').tabs();
$('#tabs').tabs('select', '#sample-tab-2');
于 2012-04-21T20:24:34.377 回答
5

使用这个功能：

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>
于 2011-12-09T15:58:12.677 回答
3

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

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

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

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

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

于 2010-05-01T03:31:19.993 回答
3

以下作品对我有用

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

希望这可以帮助！

于 2012-01-19T11:01:58.797 回答
3

试试这个：“选择”/“活动”选项卡

<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 });
于 2014-03-26T17:24:01.790 回答
1

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

于 2009-07-06T15:46:11.107 回答
1

@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 让我走上正轨。谢谢！

于 2011-10-24T19:53:41.520 回答
1

这是按名称获取所选选项卡的示例代码。我希望这可以帮助您找到 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>
于 2012-03-23T16:26:30.893 回答
1 
$('#tabs a[href="#sample-tab-1"]').click();

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

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

所以你可以找到它的id。

$('#tab1').click();
于 2018-08-03T16:22:41.153 回答
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() });
于 2018-08-21T11:03:26.597 回答
0

我很难得到任何答案，因为它们是基于旧版本的 JQuery UI。我们使用的是 1.11.4（CDN 参考）。

这是我的小提琴与工作代码： 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");
    });
于 2017-09-26T22:09:32.447 回答