問題描述

我之前使用過 jquery-ui tabs 擴(kuò)展來加載頁面通過 ajax 進(jìn)行片段，并隱藏或顯示頁面中隱藏的 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.

然而，現(xiàn)在我想用標(biāo)簽做一些不同的事情.當(dāng)用戶選擇一個選項(xiàng)卡時，它應(yīng)該完全重新加載頁面 - 原因是每個選項(xiàng)卡部分的內(nèi)容渲染起來有些昂貴，所以我不想一次全部發(fā)送并使用正常方法切換顯示:無"以顯示它們.

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.

我的計劃是攔截選項(xiàng)卡的 select 事件，并通過操作 document.location 讓該函數(shù)重新加載頁面.

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

如何在 select 處理程序中獲取新選擇的選項(xiàng)卡索引及其對應(yīng)的 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 對象的屬性將給出新選擇的選項(xiàng)卡或其中的錨標(biāo)記的索引、ID 或?qū)ο?

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?

或者有沒有更好的方法來使用標(biāo)簽來重新加載整個頁面?

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

推薦答案

我會看看 事件標(biāo)簽.以下內(nèi)容來自 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.

這篇關(guān)于jQuery 選項(xiàng)卡 - 獲取新選擇的索引的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！