当前位置： 文江博客话题详情

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

发布于 2024-07-13 21:14:35 字数 522 浏览 4 评论 0原文

如果我有三个选项卡：

<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

原文

If I have three tabs:

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

I would like to swap to #sample-tab-2 by it's name. I know I can switch to a tab if I know it's number, but in the case I've run into I won't know that.

Notes: JQuery 1.3.1 / JQuery-UI 1.6rc6

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（16）

┼── 2024-07-20 21:14:35

我无法让之前的答案发挥作用。 我执行了以下操作来按名称获取选项卡的索引：

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

I could not get the previous answer to work. I did the following to get the index of the tab by name:

var index = $('#tabs a[href="#simple-tab-2"]').parent().index();
$('#tabs').tabs('select', index);
回复 原文
一江春梦 2024-07-20 21:14:35

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

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

这在官方文档中有详细记录：

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

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

It seems that using the id works as well as the index,
e.g. simply doing this will work out of the box...

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

This is well documented in the official docs:

"Select a tab, as if it were clicked. The second argument is the
zero-based index of the tab to be selected or the id selector of the
panel the tab is associated with (the tab's href fragment identifier,
e.g. hash, points to the panel's id)."

I assume this was added after this question was asked and probably after most of the answers

回复 原文
夏天碎花小短裙 2024-07-20 21:14:35
$('#tabs').tabs('select', index);

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

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

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

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

Methods `'select' isn't support in jquery ui 1.10.0.http://api.jqueryui.com/tabs/

I use this code , and work correctly:

  $('#tabs').tabs({ active: index });
回复 原文
佞臣 2024-07-20 21:14:35

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

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

You can get the index of the tab by name with the following script:

var index = $('#tabs ul').index($('#simple-tab-2'));
$('#tabs ul').tabs('select', index);
回复 原文
窝囊感情。 2024-07-20 21:14:35

只有这段代码真正有效！

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

Only this code real works!

$('#tabs').tabs();
$('#tabs').tabs('select', '#sample-tab-2');
回复 原文
南七夏 2024-07-20 21:14:35

使用此功能：

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>

Use this function:

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

And use following code to switch between tabs:

<a onclick="uiTabs(0)">Tab 1</a>
<a onclick="uiTabs(1)">Tab 2</a>
<a onclick="uiTabs(2)">Tab 3</a>
回复 原文
南城追梦 2024-07-20 21:14:35

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

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

替代解决方案：使用“active”：

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

try this: "select" / "active" tab

<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' does not support in jquery ui version 1.10.0

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

alternate solution: use "active":

$('#gtabs').tabs({ active: index });
回复 原文
披肩女神 2024-07-20 21:14:35

获取选项卡从零开始的索引的唯一实用方法是逐步遍历构成选项卡集的每个元素（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 中宣传的那样工作，这就是为什么我使用第一遍中识别的索引来初始化选项卡集选择所需的选项卡。

The only practical way to get the zero-based index of your tabs is to step through each of the elements that make the tabset (the LI>A s) and match on their inner text. It can probably be done in a cleaner way, but here's how I did it.

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

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

You can see that I used a hidden <input id="reqTab"> field in the page to make sure the variable moved from one function to the other.

NOTE: There is a little bit of a gotcha -- selecting tabs after the tabset is activated doesn't seem to work as advertised in jQuery UI 1.8, which is why I used the identified index from my first pass in order to initialize the tabset with the desired tab selected.

回复 原文
黑白记忆 2024-07-20 21:14:35

以下内容对我有用

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

希望，这有帮助！

The following piece worked for me

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

Hope, this helps!

回复 原文
陈甜 2024-07-20 21:14:35

如果要更改 href，可以为链接分配一个 id One 这样你就可以通过它的 id 找到选项卡索引。

If you are changing the hrefs, you can assign an id to the links <a href="#sample-tab-1" id="tab1"><span>One</span></a> so you can find the tab index by it's id.

回复 原文
简美 2024-07-20 21:14:35

@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，因为他们让我走上了正确的道路。 谢谢！

@bduke's answer actually works with a slight tweak.

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

Above assumes something similar to:

<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 now supports calling "select" using the tab's ID/HREF selector, but when constructing the tabs, the "selected" Option still only supports the numeric index.

My vote goes to bdukes for getting me on the right track. Thanks!

回复 原文
森林迷了鹿 2024-07-20 21:14:35

以下是按名称获取所选选项卡的示例代码。 我希望这可以帮助您找到解决方案：

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

Here is a sample code to get the selected tab by name. I hope this aids you to find ypur solution:

<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>
回复 原文
☆獨立☆ 2024-07-20 21:14:35
$('#tabs a[href="#sample-tab-1"]').click();

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

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

以便您可以找到它的 id。

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

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

or, you can assign an id to the links

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

so you can find it's id.

$('#tab1').click();
回复 原文
海风掠过北极光 2024-07-20 21:14:35

将特定选项卡索引设置为活动状态：

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

Set specific tab index as active:

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

Set last tab as active

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

Set specific tab by ID:

$(this).tabs({ active: $('a[href="#tab-101"]').parent().index() });
回复 原文
遮云壑 2024-07-20 21:14:35

我很难得到任何答案，因为它们基于旧版本的 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");
    });

I had trouble getting any of the answers to work as they were based on the older versions of JQuery UI. We're using 1.11.4 (CDN Reference).

Here is my Fiddle with working code: http://jsfiddle.net/6b0p02um/
I ended up splicing together bits from four or five different threads to get mine to work:

    $("#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");
    });
回复 原文
娇女薄笑 2024-07-20 21:14:35

这适用于 Bootstrap v5 选项卡：

选择选项卡 id：tab-2

$('.nav-tabs a[href="#tab-2"]').tab('show');

This works for Bootstrap v5 Tabs:

To select tab id: tab-2

$('.nav-tabs a[href="#tab-2"]').tab('show');
回复 原文
~没有更多了~

关于作者

万人眼中万个我

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

内心激荡

文章 0 评论 0

JSmiles

文章 0 评论 0

赏烟花じ飞满天

文章 0 评论 0

左秋

文章 0 评论 0

迪街小绵羊

文章 0 评论 0

瞳孔里扚悲伤

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文