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

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

正如我在this question的回答中所说，有几种方法可以达到这个目的。

在jQuery documents上，他们建议执行以下操作以查找当前打开的标签的索引：

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版本：

 <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')

Answer 7

这有效：

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

Answer 8

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

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

Answer 9

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

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

9 个答案: