需要当前为jQuery选项卡选择的选项卡ID

我知道我可以获取当前所选选项卡的索引但是我可以以某种方式获取当前所选选项卡的ID（相当于ui.panel.id如果这是由选项卡事件触发…但它不是） ？ 我不想使用索引，因为选项卡的顺序可能会改变。 我不想使用样式标记，因为在将来的版本中可能会更改。 有这个方法吗？ 如果没有，我可以以某种方式使用索引来访问它（甚至可能首先访问面板对象）？ 还有其他想法吗？

Answer 1

您可以使用:visible伪选择器来定位可见面板：

 $("#tabs .ui-tabs-panel:visible").attr("id"); 

值得注意的是，您可以从activate事件中检索活动选项卡：

 $("#tabs").tabs({ activate: function (event, ui) { console.log(ui.newPanel[0].id); } }); 

Answer 2

Jonathan Sampson的回答不再适用。 尝试…

$("#tabs .ui-tabs-panel:visible").attr("id");

jsFiddle： http ： //jsfiddle.net/tbEq6/

Answer 3

如果您想要所选选项卡中的id （或实际上是href ），您可以使用eq()来检索jQuery对象。

你可以在这里看到一个例子： http ： //jsfiddle.net/svierkant/hpU3T/1/

Answer 4

正如我在回答这个问题时所说，有几种方法可以实现这一目标。

在jQuery文档中 ，他们建议执行以下操作以查找当前打开的选项卡的索引：

 var $tabs = $('#example').tabs(); var selected = $tabs.tabs('option', 'selected'); // => 0 

但是，如果您需要对该选项卡进行大量操作，这是不切实际的。 为什么他们还没有提供更实用的解决方案来获取实际元素，我不确定，但是，通过使用jQuery，您可以自己创建一个简单的解决方案。

在下面的代码中，我将向您展示使用当前选项卡执行任何操作是多么容易：

 var curTab = $('.ui-tabs-panel:not(.ui-tabs-hide)'), curTabIndex = curTab.index(), // will get you the index number of where it sits curTabID = curTab.prop("id"), // will give you the id of the tab open if existant curTabCls = curTab.attr("class"); // will give you an array of classes on this tab // etc .... // now, if you wanted a little more depth, for instance specific tabs area (if you have multiple tabs on your page) you can do simply add to your selector statement var curTab = $('#myTabs_1 .ui-tabs-panel:not(.ui-tabs-hide)'); // then you can make simple calls to that tab and get whatever data or manipulate it how you please curTab.css("background-color", "#FFF"); 

Answer 5

选择JQuery 1.9后不推荐使用

所以用

var active = $( "#jtabs" ).tabs( "option", "active" );

Answer 6

对于1.9以下的jquery版本：

  
 
 
Search
 
Notes
 
Writeback
 
Attorney
 
  

您可以使用以下命令找到活动标签：

  jQuery('#unid').find('li.active').attr('id') 

Answer 7

 var curTab = $jQuery('#tabs .ui-tabs-panel:not(.ui-tabs-hide)').attr('id'); 

Answer 8

这有效：

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

Answer 9

对于jQuery UI> = 1.9，您可以使用ui.newPanel.selector ：

 $('#tabs').on('tabactivate', function(event, ui) { console.log(ui.newPanel.selector); }); 

Answer 10

 $("#tabs .ui-state-active a").attr("id");