Question

如果我有三个标签：

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

我想用它的名字换成#pample-tab-2。我知道如果我知道它的号码，我可以切换到标签，但是如果遇到这种情况我就不知道了。

备注：JQuery 1.3.1 / JQuery-UI 1.6rc6

Answer 1

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

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

Answer 2

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

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

official docs：

中详细记录了这一点

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

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

Answer 3

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

方法`'select'在jquery ui 1.10.0中不受支持。http://api.jqueryui.com/tabs/

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

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

Answer 4

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

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

Answer 5

只有这段代码才有效！

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

Answer 6

使用此功能：

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>

Answer 7

获取选项卡的从零开始索引的唯一实用方法是逐步执行制作tabset（LI＆gt; A s）的每个元素并匹配其内部文本。它可能以更清洁的方式完成，但这就是我如何做到的。

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

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

你可以看到我使用了隐藏的＆lt; input id =“reqTab”＆gt;页面中的字段，以确保变量从一个函数移动到另一个函数。

注意：有一些问题 - 在激活tabset之后选择选项卡似乎不像jQuery UI 1.8中所宣传的那样工作，这就是为什么我使用第一次传递中识别的索引以便使用所选的选项卡初始化tabset。

Answer 8

以下作品对我有用

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

希望，这有帮助！

Answer 9

试试这个：＆＃34;选择＆＃34; /＆＃34;活跃＆＃34;标签

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

//“＆＃39;选择＆＃39;在jquery ui版本1.10.0中不支持

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

替代解决方案：使用＆＃34;激活＆＃34;：

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

Answer 10

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

Answer 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”选项仍然只支持数字索引。

我的投票是为了让我走上正轨。谢谢！

Answer 12

以下是按名称获取所选标签的示例代码。我希望这有助于你找到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>

Answer 13

我无法获得任何工作的答案，因为它们基于旧版本的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");
    });

Answer 14

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

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

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

所以您可以找到它的ID。

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

Answer 15

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

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

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

15 个答案: