获取激活的选项卡(div)的ID

我正在使用jQuery 1.9和jQuery UI 1.10

我希望能够在点击标签时获得标签ID。 例如,如果我点击名为“第二”的标签,我想获得“标签-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> 

testing并使用JQueryUI 1.10,如何获取标签的ID,因为它被选中:

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

更新 – jQuery UI 1.10的另一个解决scheme

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

更新了jsFiddle演示

这对我有用

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

如果您想在点击标签时获得某些内容,请使用select事件。

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

编辑

从版本1.10中删除了'select'到'beforeActivate'

使用咏叹调控制

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

我猜你想知道哪些选项卡被激活,并基于执行各种行动。

而不是从HTML元素中获取ID和属性,这里是你如何做:

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

当标签被创build时,激活事件不会被调用。 为此,您需要在组合中添加“tabscreate”事件,但您明白了。

检查JQueryUI事件对象(使用Mozilla的Firebug或Chrome开发者工具等浏览器debugging器)。

 $("#tabs").tabs({ activate: function( event, ui ) { console.log(event) //unnecessary, but it's how to look at the event object alert(event.currentTarget.hash) } }); 
 var id=$("ulselector li.ui-state-active").attr("aria-controls")); alert(id); 

在我看来,最简单的方法是将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" )将返回标签名称。 这也使您可以将所需的其他信息添加到选项卡。 简单的解决scheme和可扩展的我相信。

这个对我有用

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

我发现的最简单的方法是:

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

这将返回女巫活跃的ID。 请记住,您必须将#tabs更改为您的jquery.tabs ID。