jQuery选项卡 - 获取新选择的索引 [英] jQuery tabs - getting newly selected index

问题描述

我之前使用的是 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.

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

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.

我的计划是截取选项卡'选择事件，并通过操作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?

推荐答案

我会看一下Tabs的事件。以下内容来自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选项卡 - 获取新选择的索引的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！