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

问题描述

我之前使用过 jquery-ui tabs 扩展来加载页面通过 ajax 进行片段，并隐藏或显示页面中隐藏的 div.这两种方法都有很好的文档记录，我没有遇到任何问题.

I've previously used jquery-ui tabs extension to load page fragments via ajax, and to conceal or reveal hidden divs within a page. Both of these methods are well documented, and I've had no problems there.

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

Now, however, I want to do something different with tabs. When the user selects a tab, it should reload the page entirely - the reason for this is that the contents of each tabbed section are somewhat expensive to render, so I don't want to just send them all at once and use the normal method of toggling 'display:none' to reveal them.

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

My plan is to intercept the tabs' select event, and have that function reload the page with by manipulating document.location.

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

How, in the select handler, can I get the newly selected tab index and the html LI object it corresponds to?

$('#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 对象的属性将给出新选择的选项卡或其中的锚标记的索引、ID 或对象?

Is there an attribute of the event or ui object that I can read that will give the index, id, or object of the newly selected tab or the anchor tag within it?

或者有没有更好的方法来使用标签来重新加载整个页面?

Or is there a better way altogether to use tabs to reload the entire page?

推荐答案

我会看看 事件标签.以下内容来自 jQuery 文档:

I would take a look at the events for Tabs. The following is taken from the jQuery docs:

 $('.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 是要走的路.

Looks like ui.tab is the way to go.

这篇关于jQuery 选项卡 - 获取新选择的索引的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！