42

我正在使用 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>
4

11 回答 11

58

经过测试并使用 JQueryUI 1.10，如何在选择选项卡时获取选项卡的 ID：

$("#tabs").tabs({
  beforeActivate: function (event, ui) {
    alert(ui.newPanel.attr('id'));
  }
});
于 2013-02-24T08:23:58.090 回答
22 
var $tabs = $("#tabs").tabs({
    select: function( evt, ui ) {
        $("#current").text( $(ui.tab).attr('href'));
    }
})

更新- 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')); 
     } 
});

更新了 jsFiddle 演示

于 2013-01-24T13:17:22.950 回答
4

这对我有用

$( "#editor_tabs" ).tabs( { 
    activate: function ( event, ui ) {
        $(ui.newTab.find("a").attr("href")).html("Got It");
    }
});
于 2013-12-06T06:06:09.647 回答
2

如果您想在单击选项卡时得到一些东西，请使用 select 事件。

$('#tabs').tabs({
  beforeActivate: function(event, ui){
     alert($(ui.tab).attr('href'));
 }
 });

编辑

将“select”更改为“beforeActivate”，因为它已从 1.10 版中删除

于 2013-01-24T13:21:56.823 回答
1 
var id=$("ulselector li.ui-state-active").attr("aria-controls"));
alert(id);
于 2014-10-20T06:58:00.763 回答
1

我猜您想知道哪个选项卡被激活，并基于该选项卡执行各种操作。

与其从 HTML 元素中获取 id 和属性，不如按照以下方式进行操作：

$("#tabs").on("tabsactivate", (event, ui) => {
    if (ui.newPanel.is("#tabs-1")){
        //first tab activated
    }
    else{
        //second tab activated
    }
});

创建选项卡时不会调用激活事件。为此，您需要在组合中添加“tabscreate”事件，但您明白了。

于 2013-09-28T00:36:08.037 回答
1

检查 JQueryUI 事件对象（使用浏览器调试器，如 Mozilla 的 Firebug 或 Chrome 开发工具）。

$("#tabs").tabs({        
    activate: function( event, ui ) { 
        console.log(event)  //unnecessary, but it's how to look at the event object              
        alert(event.currentTarget.hash)
    }
});
于 2013-10-14T05:01:01.590 回答
0

It works for me

$('#divName .ui-tabs-panel[aria-hidden="false"]').prop('id');
于 2015-03-11T05:52:37.860 回答
0

使用 aria-controls

alert(ui.newTab.attr("aria-controls"));
于 2013-01-27T12:00:13.907 回答
0

在我看来，最简单的方法是添加data-到<li ...>组成选项卡的选项卡中。

例如：

                <li data-index="2" data-tabname="Notes">
                  <a href="#tabs-Employee-Notes">Notes</a>
                </li>

然后处理 beforeActivate 事件（如果这是您正在查看的事件）：

$("#jqTabs_EmployeeDetails").tabs({
    heightStyle: "fill",
    beforeActivate: function (event, ui) {
        var n = ui.newTab;

        console.log($(n).data());
    }
});

例如，$(n).data("tabname") 将返回选项卡名称。这还允许您将所需的任何其他信息添加到选项卡中。我相信简单的解决方案和可扩展的。

于 2015-01-13T03:53:23.737 回答
0

我发现最简单的方法是：

$('#tabs .ui-state-active').attr('aria-controls')

这将返回来自 div 女巫的 ID 处于活动状态。请记住，您必须将 #tabs 更改为您的 jquery.tabs ID。

于 2016-01-20T09:49:11.930 回答