20

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

4

11 回答 11

22

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

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

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

$("#tabs").tabs({
    activate: function (event, ui) {
        console.log(ui.newPanel[0].id);
    }
});
于 2009-12-08T02:30:03.043 回答
13

乔纳森桑普森的回答不再有效。尝试...

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

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

于 2013-11-13T15:41:55.427 回答
4

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

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

于 2012-05-20T07:52:03.917 回答
3

在 JQuery 1.9 selected 被弃用之后

所以使用

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

于 2013-10-08T08:33:05.210 回答
3

正如我在对这个问题的回答中发布的那样，有几种方法可以实现这一点。

在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");
于 2012-02-07T20:47:53.930 回答
1

对于 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')
于 2017-08-21T16:36:25.477 回答
0

这有效：

$('#divName .ui-tabs-panel[aria-hidden="false"]').prop('id');
于 2015-03-11T05:43:02.997 回答
0 
var curTab = $jQuery('#tabs .ui-tabs-panel:not(.ui-tabs-hide)').attr('id');
于 2012-07-27T14:55:52.187 回答
0

我把头撞在这堵墙上一会儿。我有许多引用 url 的选项卡与一堆由 javascript 代码填充的选项卡混合在一起，因此，它们具有在标记中定义的关联 div (.ui-tabs-panel)。

jQuery UI 选项卡小部件使用面板的“aria-labeledby”属性将选项卡与面板链接。该属性具有选项卡中包含的锚点的值。所以，对于这个标记

<ul><li id='tab_1'><a href='ferndorf.php'>I Be Tab_1</a></li></ul>

附加 jQuery Tab 小部件后，您可以使用

panel = $( '.ui-tab-panel[aria-labeledby=' + $( '#tab_1 a' ).attr( 'id' ) + ']' )

反之亦然，您可以使用

tab = $( '#' + $( panel ).attr( 'aria-labeledby' ) ).closest( 'li' );

选项卡和面板的索引仅在简单结构中相关。

玩得开心。

于 2021-08-24T01:02:11.347 回答
0

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

$('#tabs').on('tabactivate', function(event, ui) {
  console.log(ui.newPanel.selector);
});
于 2016-03-08T18:37:44.350 回答
-1 
$("#tabs .ui-state-active a").attr("id");
于 2014-11-22T06:55:31.303 回答