获取激活的选项卡(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。