jQuery 获取正在激活的选项卡 (div) 的 ID
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14502156/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get the ID of the tab (div) being activated
提问by AlvaroV
I'm using jquery 1.9 and jquery UI 1.10
我正在使用 jquery 1.9 和 jquery UI 1.10
I want to be able to get the tab ID when clicking on a tab. For example if I clicked tab named "Second" I want to get "tabs-2" response.
我希望能够在单击选项卡时获取选项卡 ID。例如，如果我单击名为“Second”的选项卡，我想获得“tabs-2”响应。
I've done the below code so far:
到目前为止，我已经完成了以下代码：
<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>
回答by thenickdude
Tested and working with JQueryUI 1.10, how to get the ID of the tab as it is selected:
测试并使用 JQueryUI 1.10，如何在选择时获取选项卡的 ID：
$("#tabs").tabs({
beforeActivate: function (event, ui) {
alert(ui.newPanel.attr('id'));
}
});
回答by MuhammadHani
var $tabs = $("#tabs").tabs({
select: function( evt, ui ) {
$("#current").text( $(ui.tab).attr('href'));
}
})
UPDATE- Another solution for jquery UI 1.10
更新- 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'));
}
});
回答by Eelco
This works for me
这对我有用
$( "#editor_tabs" ).tabs( {
activate: function ( event, ui ) {
$(ui.newTab.find("a").attr("href")).html("Got It");
}
});
回答by Pitchai P
If you want to get something when clicking on tab, use the select event.
如果您想在单击选项卡时获得某些内容，请使用 select 事件。
$('#tabs').tabs({
beforeActivate: function(event, ui){
alert($(ui.tab).attr('href'));
}
});
EDIT
编辑
Changed 'select' to 'beforeActivate' as it has been removed from version 1.10
将“选择”更改为“beforeActivate”，因为它已从 1.10 版中删除
回答by Nikhil Raj k
var id=$("ulselector li.ui-state-active").attr("aria-controls"));
alert(id);
回答by MoonStom
I'm guessing you want to know which tab gets activated, and based on that execute various actions.
我猜您想知道哪个选项卡被激活，并基于此执行各种操作。
Rather than fetching ids and attributes from the HTML elements, here is how you do it:
这里不是从 HTML 元素中获取 id 和属性，而是如何做到的：
$("#tabs").on("tabsactivate", (event, ui) => {
if (ui.newPanel.is("#tabs-1")){
//first tab activated
}
else{
//second tab activated
}
});
The activate event is not getting called when the tabs get created. For that you'd need to add the "tabscreate" event in the mix, but you get the idea.
创建选项卡时不会调用 activate 事件。为此，您需要在混合中添加“tabscreate”事件，但您明白了。
回答by wildbill
Examine the JQueryUI event object (use a browser debugger like Mozilla's Firebug or Chrome developer tools).
检查 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)
}
});
回答by Michael
In my opinion, the easiest way is to add data-to the <li ...>that make up the tabs.
在我看来，最简单的方法是添加data-到<li ...>组成标签的 。
For example:
例如：
<li data-index="2" data-tabname="Notes">
<a href="#tabs-Employee-Notes">Notes</a>
</li>
Then handle the beforeActivate event (if that is the event you are looking at):
然后处理 beforeActivate 事件（如果这是您正在查看的事件）：
$("#jqTabs_EmployeeDetails").tabs({
heightStyle: "fill",
beforeActivate: function (event, ui) {
var n = ui.newTab;
console.log($(n).data());
}
});
For example, $(n).data("tabname") would return the tab name. This also allows you to add any other information you need to the tabs. Simplist solution and scalable I believe.
例如，$(n).data("tabname") 将返回选项卡名称。这还允许您将所需的任何其他信息添加到选项卡中。我相信简单的解决方案和可扩展的。
回答by krunal chavda
It works for me
这个对我有用
$('#divName .ui-tabs-panel[aria-hidden="false"]').prop('id');
回答by Frank
The easyest way I found is :
我发现的最简单的方法是：
$('#tabs .ui-state-active').attr('aria-controls')
This will return the ID from the div witch is active. Remember you must change #tabs to your jquery.tabs ID.
这将返回处于活动状态的 div 女巫的 ID。请记住，您必须将 #tabs 更改为您的 jquery.tabs ID。
