Question

我正在使用jquery 1.9和jquery UI 1.10

我希望能够在单击选项卡时获取选项卡ID。例如，如果我点击名为“Second”的标签，我想获得“标签-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'));
    }
})

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

Answer 4

如果要在单击选项卡时获取某些内容，请使用select事件。

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

修改

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

Answer 5

我猜你想知道哪个标签被激活，并根据它执行各种动作。

不是从HTML元素中获取id和属性，而是如何执行此操作：

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

创建选项卡时不会调用activate事件。为此，你需要在混音中添加“tabscreate”事件，但你明白了。

Answer 6

检查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)
    }
});

Answer 7

var id=$("ulselector li.ui-state-active").attr("aria-controls"));
alert(id);

Answer 8

使用咏叹调控件

alert(ui.newTab.attr("aria-controls"));

Answer 9

在我看来，最简单的方法是将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"）将返回选项卡名称。这也允许您将所需的任何其他信息添加到选项卡。我相信简化解决方案和可扩展性。

Answer 10

它对我有用

$('#divName .ui-tabs-panel[aria-hidden="false"]').prop('id');

Answer 11

我找到的最简单的方法是：

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

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

获取正在激活的选项卡（div）的ID

11 个答案: