获取被激活的标签(div)的ID

Question

我使用的是jquery 1.9和jquery UI 1.10

我希望在单击选项卡时能够获得选项卡ID。例如，如果我单击了名为"Second“的选项卡，我希望得到"tabs-2”响应。

到目前为止，我已经完成了以下代码：

<script type="text/javascript">
    $(function () {
        $("#tabs").tabs({
            beforeActivate: function (event, ui) {
                alert(/* the id of the tab (div) being activated */);
            }
        });
    });
</script>

<div id="tabs">
    <ul>
       <li><a href="#tabs-1">First</a></li>
       <li><a href="#tabs-2">Second</a></li>
    </ul>
    <div id="tabs-1">
        <p>abcde</p>
    </div>
    <div id="tabs-2">
        <p>fghi</p>
    </div>
</div> 

Answer 1

经过测试并与JQueryUI 1.10配合使用，如何在选项卡被选中时获取其ID：

$("#tabs").tabs({
  beforeActivate: function (event, ui) {
    alert(ui.newPanel.attr('id'));
  }
});

Answer 2

var $tabs = $("#tabs").tabs({
    select: function( evt, ui ) {
        $("#current").text( $(ui.tab).attr('href'));
    }
})

UPDATE - jquery UI 1.10的另一个解决方案

    $(function () { $('#tabs').tabs({ 
             activate: function (event, ui) {
             var active = $("#tabs").tabs("option", "active");
             alert($("#tabs ul>li a").eq(active).attr('href')); 
     } 
}); 

Updated jsFiddle Demo

Answer 3

这对我很管用

$( "#editor_tabs" ).tabs( { 
    activate: function ( event, ui ) {
        $(ui.newTab.find("a").attr("href")).html("Got It");
    }
});