需要當前選定的標籤ID爲jQuery標籤

Question

我知道我可以得到當前選定的標籤的索引，但我可以以某種方式獲得ID（相當於ui.panel.id，如果這是由標籤事件觸發的......但它是不是）當前選定的標籤？我不想使用索引，因爲選項卡的順序可能會改變。我更喜歡不使用樣式標記，因爲這些標記在未來的版本中可能會更改。有沒有一種方法呢？如果沒有，我可以以某種方式使用索引來訪問它（甚至可以通過首先訪問面板對象）？任何其他想法？

Answer 1

可以使用:visible pseudo-selector目標的可視面板：

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

值得一提的是，你可以檢索從activate event活動標籤：

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

Answer 2

正如我貼在回答this question，有幾種方法可以實現這一點。

在jQuery documents，他們建議做到以下幾點發現當前打開的選項卡的索引：

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

然而，這是不切實際的，如果你需要做大量的與該選項卡。 爲什麼他們還沒有提供獲取實際元素的更實用的解決方案，但我不確定，但是，通過使用jQuery，您可以創建一個簡單的解決方案。

在下面的代碼中，我會告訴你它是多麼容易的事要與當前標籤任何信息：id（或實際上是href）從所選的選項卡。如果您想

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 3

，您可以使用eq()來檢索jQuery對象。

這裏你可以看到一個例子：http://jsfiddle.net/svierkant/hpU3T/1/

Answer 4

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

Answer 5

選擇已被棄用

的JQuery 1.9之後所以使用

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

Answer 6

喬納森·桑普森的答案不工作了。試試...

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

的jsfiddle：http://jsfiddle.net/tbEq6/

Answer 7

$("#tabs .ui-state-active a").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

對於jquery版本低於1。9：

<div class="roundedFloatmenu"> 
     <ul id="unid"> 
      <li class="titleHover" id="li_search">Search</li>    
      <li class="titleHover" id="li_notes">Notes</li> 
      <li class="titleHover active" id="li_writeback">Writeback</li>   
      <li class="titleHover" id="li_attorney">Attorney</li> 
     </ul> 
    </div 

，你可以找到使用有源標籤：

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