选定的选项卡 ID？

Question

我有以下脚本，它获取所选选项卡的索引：

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

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

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

Answer 2

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

Answer 3

如果您能够简单地使用选项卡控件的 select 事件处理程序，则效果很好：

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

另外，这里是 不同 ui 对象属性的便捷参考。

Answer 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

Answer 5

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

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

文档