javascript - jQuery 选项卡 - 获取新选择的索引

Question

我以前使用过jquery-ui tabs扩展通过ajax加载页面片段，并隐藏或显示页面内隐藏的div。这两种方法都有详细的文档记录，我在这方面没有遇到任何问题。

但是现在，我想用选项卡做一些不同的事情。当用户选择一个选项卡时，它应该完全重新加载页面 - 原因是每个选项卡部分的内容渲染起来有点昂贵，所以我不想一次性发送所有内容并使用正常方法切换“display:none”来显示它们。

我的计划是拦截选项卡的 select 事件，并让该函数通过操作 document.location 重新加载页面。

如何在select处理程序中获取新选择的选项卡索引及其对应的html LI对象？

$('#edit_tabs').tabs(  {
        selected: 2,     // which tab to start on when page loads
        select: function(e, ui) {
            var t = $(e.target);
            // alert("data is " +  t.data('load.tabs'));  // undef
            // alert("data is " +  ui.data('load.tabs'));  // undef

            // This gives a numeric index...
            alert( "selected is " + t.data('selected.tabs') )
            // ... but it's the index of the PREVIOUSLY selected tab, not the
            // one the user is now choosing.  
            return true;

            // eventual goal is: 
            // ... document.location= extract-url-from(something); return false;
        }
});

是否有我可以读取的事件或 ui 对象的属性，该属性将提供新选择的选项卡或其中的 anchor 标记的索引、id 或对象？

或者是否有更好的方法来使用选项卡重新加载整个页面？

Answer 1

我会看一下 events对于选项卡。以下内容摘自 jQuery 文档:

 $('.ui-tabs-nav').bind('tabsselect', function(event, ui) {
     ui.options // options used to intialize this widget
     ui.tab // anchor element of the selected (clicked) tab
     ui.panel // element, that contains the contents of the selected (clicked) tab
     ui.index // zero-based index of the selected (clicked) tab
 });

看起来 ui.tab 是正确的选择。