选择标签ID？答案

【问题标题】：Selected tab id?选择标签ID？
【发布时间】：2011-03-14 14:39:01
【问题描述】：

我有以下脚本可以获取所选标签的索引：

http://jsfiddle.net/oshirowanen/eWncA/

如果 li 有 id，是否可以获取 id。如果从其他地方更容易获得它，那也可以，即相关的 div 标签或其他地方。

【问题讨论】：

我不同意，将链接发布到 jsfiddle 允许用户快速轻松地更改脚本，而无需在自己的计算机上重新创建它，这对于尝试的人来说需要更长的时间帮助。

标签： jquery jquery-ui jquery-ui-tabs

【解决方案1】：

jQuery UI 只是将一个类添加到选定的 li。您可以像这样将所选类的 li 拉出来：

   var id = $("li.tab.ui-tabs-selected").attr("id");

如果您想获得其中一个未选中的选项卡，您可以执行以下操作：

var id = $("li.tab:not(.ui-tabs-selected)").first().attr("id");

工作示例：

http://jsfiddle.net/UBs9m/2/

【讨论】：

您的演示似乎不起作用。它似乎正在返回索引。
我更喜欢 Eugene 下面的解决方案，因为虽然它在技术上效率较低，但它不依赖于 jQuery 的默认行为，它向用户展示了她/他如何获取未选择选项卡的 id不同的未来情况。
更新了我的 jsfiddle 链接，还包括了一种获取“未选择”标签的方法，以防万一

【解决方案2】：

var id = $("li.tab:eq("+selected+")").attr('id');

【讨论】：

【解决方案3】：

如果您能够简单地使用 Tabs 控件的 select 事件处理程序，则可以正常工作：

$('#tabs').tabs({
    select: function( evt, ui ) {
        console.log( $(ui.panel).attr( 'id' ) );
    }
});

另外，这里是 a handy reference 用于不同的 ui 对象属性。

【讨论】：

【解决方案4】：

如果您使用的是 jquery 选项卡（新版本）：

<div id="tabs">
        <ul>
            <li data-value="tab1"><a href="#tab1">Name of tab1</a></li>
            <li data-value="tab2"><a href="#tab2">Name of tab2</a></li>
        </ul>
        <div id="tab1">
        </div>
        <div id="tab2">
        </div>
 </div>       

 //get id in init
 $(function () {
    $("#tabs").tabs({
        activate: function(event ,ui) {
           var id = $(ui.newPanel).prop('id');
        }
      }
    );
 });
 var id = $("#tabs li.ui-state-active").attr('data-value'); //get id in other function

【讨论】：

【解决方案5】：

如果您像我一样通过 Google 来到这里，并且正在使用 jQuery UI 1.9.X，请使用 activate 或 beforeActivate 事件来获取 id：

$('selector').tabs({
  activate: function(e, ui) {
    var id = $(ui.newPanel).prop('id');
  }
});

Documentation

【讨论】：